vue项目中配置scss

 之前创建 vue 项目的时候没有选择 scss 预编译，现在项目中要使用，不知道如何配置，网上搜了下全都是：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

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

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

我就纳闷了，我项目里并没有build文件夹和 webpack.base.conf.js 。

难道是版本问题？查看vue-cli 版本，3.0+

 

百度~，果然，3.0+版本，没有了build文件，只需要 cmd 执行

npm install -D sass-loader node-sass

 

style标签添加 lang 属性就能用了

<style lang="scss">

$color:red;

div {

  h1 {color:$color;}

}

</style>

 

 官方文档连接

 https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

 

新手博客，请多多指教