vue-cli中配置sass（转）

vue-cli中配置sass

原文链接：https://www.cnblogs.com/rainheader/p/6505366.html

 

如何配置sass

一、安装对应依赖node模块：

npm install node-sass --save

npm install sass-loader --save

二、打开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   }

三、在用scss的地方写上

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