1刑棵、安裝sass的依賴包
npm install node-sass --save-dev
npm install sass-loader --save-dev //sass-loader依賴于node-sass
npm install style-loader css-loader --save-dev
2、打開(kāi)webpack.base.config.js在loaders里面加上添加配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/, //-------------------------------------添加此處
loaders: ["style", "css", "sass"]
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
3垂蜗、在vue文件style標(biāo)簽聲明一下
<style lang="scss" scoped="" type="text/css"></style>
4庆械、在vue文件引入sass文件遇到的一些問(wèn)題
<style lang="stylus">
//使用 ../來(lái)匹配路徑可以正確導(dǎo)入
@import '../assets/css/_mixin.scss'; //正確
//使用 alias 中 配的 @ 就不能用了
@import '@/assets/css/_mixin.scss'; //錯(cuò)誤
</style>
解決方法：@import '~@/assets/scss/helpers/_mixin';
原因：CSS loader 會(huì)把把非根路徑的url解釋為相對(duì)路徑腊瑟， 加~前綴才會(huì)解釋成模塊路徑跳昼。
