vue-cli中配置sass

如何配置sass

1、安裝對應依賴node模塊：

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

2、打開webpack.base.config.js在loaders裏面加上

 1 rules: [
 2       {
 3         test: /\.vue$/,
 4         loader: 'vue-loader',
 5         options: vueLoaderConfig
 6       },
 7       {
 8         test: /\.js$/,
 9         loader: 'babel-loader',
10         include: [resolve('src'), resolve('test')]
11       },
12       {
13         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
14         loader: 'url-loader',
15         query: {
16           limit: 10000,
17           name: utils.assetsPath('img/[name].[hash:7].[ext]')
18         }
19       },
20 { 21 test: /\.scss$/, 22 loaders: ["style", "css", "sass"] 23 }, 24       {
25         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
26         loader: 'url-loader',
27         query: {
28           limit: 10000,
29           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
30         }
31       }
32     ]
33   }

3、在用scss的地方寫上

<style lang="scss" scoped="" type="text/css"></style>