vue——项目中使用scss

1. 使用vue-cli创建新项目：vue init webpack my-project

2. 安装sass 依赖包 ，在cmd界面输入：

// 命令行
npm  install sass-loader --save-dev
npm install node-sass --sava-dev

3. 在build文件夹（使用vue-cli才有有效webpack.base.conf.js文件夹）下的webpack.base.conf.js的rules里面添加配置

module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ['style','css','sass']
      },
          ]
      }

4. 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

scss使用测试：如下测试修改字体颜色

<style lang="scss">
$color:red;
div {color:$color;}
</style>

完成这些步骤运行之后若报如下错（因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行）

 ERROR  Failed to compile with 1 errors                                                                                                                                                      下午2:42:30

 error  in ./src/pages/personal_work.vue

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (C:\Users\EDZ\Desktop\20年项目\vue版门户网站\vue_portal\node_modules\sass-loader\dist\index.js:52:26)

 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-03efbd84","scoped":true,"hasInlineConfig":false}!./~/sass-loader/dist/cjs.js
?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/personal_work.vue 4:14-386 13:3-17:5 14:22-394
 @ ./src/pages/personal_work.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

解决方法：

找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了。

我本地是将 “sass-loader”: “^8.0.2”，更换成了 “sass-loader”: “^7.3.1”,

执行命令，重新安装项目依赖：
npm install
然后重新 npm run dev 搞定！