vue项目中使用sass语法

我们在使用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了。