vue中安装sass,cli2配置---------cli3配置全局sass/scss变量

原创 柠-檬℃ 随笔 Vue 209阅读 2018-11-03 17:22:11 举报

在项目中使用scss之前,先打开package.json,看看是否已经安装了sass需要的安装包!
1.node-sass
2.sass-loader
3.style-loader

如果没有可以进行安装运行语句

安装完成之后package.json中会有这三个安装包
然后在vue文件中可以这样写

我在网上搜的资料有的需要去项目的build>webpack.base.conf.js>module>rules中添加一段话
我项目中没有添加也是好使的。如果安装包之后不好使,可以选择添加这句话试试

cli2中如果想设置全局的/sass/scss变量,要新建以.scss为后缀的css文件,貌似还需要安装一个包

然后在build>util.js中

这样就可以新建.scss的文件了。

cli3设置sass/scss全局变量,也是需要配置的,找了好久的资料,才找到如何设置,下面是设置方法

我在src/assets/scss/style.scss新建了一个style.scss文件,里面写了如下图代码

然后需要在vue.config.js里面进行配置,如果还不知道什么是vue.config.js的同学,去查询cli3官网,配置如下

上面代码的@代表了src目录

然后我在vue文件的style里面就可以这么写:

那么现在这样就是我们所需要的cli3配置全局变量

--------后续有新的改进会持续更新

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复