我们在使用vue-cli快速构建项目后，发现项目中并没有使用sass语法，但是我们可以通过配置webpack的rule，来实现此功能。
使用vue-cli快速构建项目(基于webpack模板的项目参考官方文档)
vue init webpack projectName
配置淘宝镜像
说明：我们需要将npm的镜像修改一下，可以改为国内的淘宝镜像（已经改过的，此步可以忽略）
npm config set registry https://registry.npm.taobao.org/
添加对应的模块(npm包)
添加node-sass模块和sass-loader模块
npm install node-sass sass-loader --save-dev
配置webpack文件
打开build文件夹中的webpack.base.config.js文件，然后在rule中添加如下配置：
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
PS: 在需要使用sass的组件中，style标签上添加lang=scss即可。
vue-cli的文档上写写明了0配置，其实只需要安装@vue/cli + @vue/cli-service-global插件即可，就不需要在webpack配置文件里面手动进行配置rule了。
网友评论