详解vue-cli中配置sass

如何配置sass一、安装对应依赖node模块：npminstallnode-sass--save-devnpminstallsass-loader--save-dev二、

如何配置sass

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

npm install node-sass --save-dev

npm install sass-loader --save-dev 

二、打开webpack.base.config.js在loaders里面加上

rules: [
 {
 test: /\.vue$/,
 loader: 'vue-loader',
 options: vueLoaderConfig
 },
 {
 test: /\.js$/,
 loader: 'babel-loader',
 include: [resolve('src'), resolve('test')]
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },
 {
 test: /\.scss$/,
 loaders: ["style", "css", "sass"]
 },
 {
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 query: {
 limit: 10000,
 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
 }
 ]
 }

三、在用scss的地方写上

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue cli 配置sass vue cli sass vuecli sass