vue使用scss,并且全局引入公共scss样式

有时我们项目的主题可能需要调整,如果每个页面的css都要修改那就太麻烦了,我们可以定义一些变量方便更改整个项目的配色。

基于官方提供的脚手架vue-cli进行搭建框架

等安装完所有依赖后,安装sass的依赖包:

cnpm i  sass-loader --save-dev
//sass-loader依赖于node-sass
cnpm i node-sass  --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置:

 {
        test:/\.scss$/,
        loader:['style','css','sass']
  }

在.vue文件中使用