如何配置 sass
一、安装对应依赖 node 模块:
- npm install node-sass --save-dev
- npm install sass-loader --save-dev
二、打开 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>
来源: http://www.bubuko.com/infodetail-1969704.html