vue项目中使用less或者sass的方法
半年木有更新博客了。。。
前段时间一直在学习vue,开始记录一下遇到的问题吧
这篇文章主要是总结一下vue中使用less或者sass的方法,以less为例(style.less)
主要是两种
1.对于写在vue文件中的less:
所有vue文件的<style lang="less"></style>,会被vue-loader处理编译到一个css文件中,最终自动通过link标签写入index.html(在vue-loader.conf.js中配置)
<style scoped lang="less">
.notFoundPage {
background-color: #0a8acd;
color: #fff;
position: relative;
h1 {
font-weight: 500;
}
}
</style>
<link href="/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">
2.对于外部less文件:
一是在mian.js中import style.less
此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件,并在index.html的link中自动引入
二是在webpack的入口文件entry中加上style.less,编译完的出口文件会被自动注入到index.html文件中
entry: {
app: './src/main.js',
style: './src/style/style.less'
},
<script type="text/javascript" src="/static/js/style.c67fefaf3f60c5ca074a.js"></script>
注意:
在vue2.x的webpack.base.conf.js:
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
这段是针对.vue文件的处理规则,其中vueLoaderConfig是vue-cli自己定义的加载器,专门处理css样式
vueLoaderConfig引用的utils.js:
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
所以不需要再在rules里写.css .less 的处理规则了。
vue项目中使用less或者sass的方法的更多相关文章
- vue项目中跳转到外部链接方法
当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- <转载> VUE项目中CSS管理
vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...
随机推荐
- RocketMQ消费批拉超过32不生效
由于一些原因,我需要RocketMQ消费的时候,一批拉400条,一批处理400条.设置如下: 为了简单验证是否正确,消费如下: 直接通过打印msgs.size()观察情况即可. 现象 实验的topic ...
- How to compile tensorflow on CentOS
Tensorflow is a very effective machine learning library implemented by C++, we can use tensorflow wi ...
- PADS导入DXF板框,不能将开放的2D线转换成闭合的板框错误
刚开始学会用PADS,学习的时候都是在PADS里手绘一个板框的.然后实际项目中,都是需要导入结构DXF板框文件,第一次导入就发现了问题. 第一次导入DXF后,需要将DXF转换为板框,但提示 “不能将开 ...
- 2016蓝桥杯"取球博弈"问题
较难,网上有能得出正确结果的代码,但是读了一下,像是拼凑出的结果,逻辑不通,代码和注释不符 参考网上代码写了一版,结构相对清晰,注释比较详细 题目很长: 两个人玩取球的游戏.一共有N个球,每人轮流取球 ...
- hadoop单机模式安装流程
这里的安装是在Linux系统上安装的 参考博客 : https://blog.csdn.net/cafebar123/article/details/73500014 https://blog.csd ...
- Linux下Docker快速部署LAMP
文章目录 拿来即用 获取LAMP LAMP版本 icoty1/lamp:v1.1.0制作过程 获取ubuntu基础镜像 安装依赖 mysql apache/php phpmyadmin 使apache ...
- Navicat操作SQL server 2008R2文件.bak文件还原
项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...
- 佳鑫:信息流广告CTR一样高,哪条文案转化率更好?
在优化信息流广告的过程中,你有没有遇到这样的帐户? 投了几个AB方案,点击率好不容易上去了,但转化率还是有的高.有的低! 这儿就有这么一个为难的案例: 一个广告主计划向有意愿在北京预订酒店的用户投放信 ...
- (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换
1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...
- Oracle从入门到精通----学习笔记
书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...