vue-cli 配置sass踩坑

1、vue-cli已经配置好sass文件
  此次项目采用vue-cli快速搭建h5页面，预编译语言采用sass，之前有用webpack独立搭建项目的经验，就进入webpack.base.config.js文件配置sass rules，如下：

运行之后却报错了，日志如下：

ERROR Failed to compile with 2 errors 4:33:44 PM
error in ./src/assets/css/global.scss
Module build failed:
.header{
^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
in /Users/zyb/Desktop/AttendanceApp/src/assets/css/global.scss (line 1, column 1)
@ ./src/assets/css/global.scss 2:14-351 21:1-42:3 22:19-356
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
error in ./src/assets/css/my-mint.scss

  发现是sass配置重复了，vue-cli已经配置好sass了，在build/utils.js文件下，我们只需要安装好node-sass、sass-loader这两个依赖即可。

2、@import scss图片路径问题

  引入两类scss文件，其中css/show.scss中引入了图片的相对路径

  而另一类scss文件没有引入图片的相对路径

  运行后，报错，读错误日志可以看出是图片的路径出问题了，经过测试，发现@import scss文件时，相当于把引入的scss文件的代码拷贝过去，所以相对路径被拷贝到了引入文件，导致路径出错。

These relative modules were not found:
../images/right-mark.png in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-c3f8ee08","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/attendance/attend-index.vue
../images/warning-mark.png in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-c3f8ee08","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/attendance/attend-index.vue

解决方法
  被引入的scss文件的相对路径改为绝对路径，注意 css loader 会把非根路径的url解析为相对路径，加~前缀才解析为模块路径。

这里的@符号可以在手动配置，在webpack.base.conf.js文件