作者：心叶时间：2019-01-01 16:33
本篇最终项目文件 Github 地址：github.com/yelloxing/vue.quick/tree/V6
scss 支持
为了使用 scss，我们需要先安装相关的 node 包：
npm install –save style-loader sass-loader node-sass file-loader
安装好之后，为了可以在.vue 和.scss 中使用，需要在 webpack.config.js 中配置对应的解析器：
var webpack = require(‘webpack’);
module.exports = {
entry: [‘./src/entry.js’],
output: {
path: __dirname,
filename: ‘build/main.js’
},
resolve: {
alias: {
‘vue’: ‘vue/dist/vue.js’
}
},
module: {
loaders: [{
test: /\.vue$/,
loader: ‘vue-loader’,
options: {
loaders: {
scss: ‘style-loader!css-loader!sass-loader’
}
}
},
{
test: /\.js$/,
loader: ‘babel-loader’,
exclude: /node_modules/
},{
test: /\.css$/,
loader: [‘style-loader’, ‘css-loader’]
}, {
test: /\.scss$/,
loader: [‘style-loader’, ‘css-loader’, ‘sass-loader’]
}, {
test: /\.(png|jpg|jpeg|gif|bmp)$/,
loader: [‘file-loader?limit=7000&name=build/assets/[name].[ext]’]
}
]
}
};
关于上面 resolve 的配置，是因为编译和打包源文件默认不一样。
测试 scss
打开 PageTwo.vue 测试一下：
<style lang=”scss” scoped>
section {
& > div {
font-size: 20px;
}
}
</style>
编译正常。