这篇文章主要介绍了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'
}
}
},
{
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测试一下：
