深入解析Vue2 添加对scss的支持
2019-01-30 本文已影响17人
a333661d6d6e
这篇文章主要介绍了详解Vue2 添加对scss的支持,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
引入loader
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
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'
}//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
}
},
{
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]']
}//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
]
}
};
关于上面resolve的配置,是因为编译和打包源文件默认不一样。
测试scss
打开PageTwo.vue测试一下:
<style lang="scss" scoped>
section {
& > div {
font-size: 20px;
}
}
</style>
编译正常。
结语
感谢您的观看,如有不足之处,欢迎批评指正。
获取资料
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:619586920,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。