vue中使用scss

之前项目里我一般是使用less的,朋友问到如何引入scss,于是我就简单的跑了一下,以下主要供自己学习,如有更好的方法可以一起交流讨论一下

第一步,安装依赖

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev

注:使用npm下载的时候会报错,这里推荐使用淘宝镜像

第二步,下载全局引入scss的依赖,注:如果是直接写在.vue页面中是无需下载此依赖的

cnpm install sass-resources-loader --save-dev

第三步,配置build/utils.js

　　将:

scss: generateLoaders('sass'),

修改为:

　　在webpack.base.conf.js中的module.rules添加如下配置

{
        test: /.scss$/,
        loaders: ["style", "css", "sass"]
      },

然后你可以在index.scss中引入其余的scss文件

注意:无需在main.js中引入,直接重启项目看到如下页面就表示全局引入成功了,这里要注意一点的是,一定要你想该scss生效的.vue文件下添加

<style lang = "scss"></style>这块代码,表示scss的样式在此vue单页面有效,否则你是看不到这个效果的