1,使用save会在package.json中自动添加。
npm install sass-loader --save-dev
注:
通常使用npm安装会出现以下报错,安装失败。(网路问题)
可以通过淘宝的npm镜像安装node-sass,解决以上问题。
$ cnpm install node-sass --save (使用淘宝镜像安装node-sass)
2.进入webpack.base.config.js 配置scss module -- loaders (vue1.0)
css-loader
test: /.vue$/,loader: 'vue-loader',options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
}
打开webpack.base.config.js在loaders里面加上 module -- rules (vue2.0)
{
test: /.vue$/,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)(\?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
3.如果需要在vue文件style标签使用scss的话,需要声明一下:
vue1.0
vue2.0