vue项目引入scss插件问题记录

配置过程

1. 安装插件，命令如下：

   npm install --save-dev sass-loader
   npm install --save-dev node-sass
   

2. 配置 webpack.base.conf.js
   找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

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

3. 使用
   在使用的地方如下写法：

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

出现的问题

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined
at validateString (internal/validators.js:117:11)
at Object.join (path.js:375:7)
at getSassOptions (E:\MobileManagement\vue-src\node_modules_sass-loader@10.0.4@sass-loader\dist\utils.js:160:37)
at Object.loader (E:\MobileManagement\vue-src\node_modules_sass-loader@10.0.4@sass-loader\dist\index.js:36:49)

网上搜到的方案

• 重复配置的问题：新版的 vue-cli 已经配置了 sass-loader, webpack.base.conf.js 和 utiles.js 重复配置了 sass-loader，省略配置过程的第二步
• 版本问题：把package.json里面 node-sass 和 sass-loader 版本改成：“node-sass”: “^4.11.1”，“sass-loader”: "^7.3.0"就可以了

最后的解决

我本地 vue-cli 版本为 2.9.6，亲测不论是否配置 webpack.base.conf.js 都无影响，修改版本后不再报错。

追加

上面提到不论是否配置 webpack.base.conf.js 都不会再报参数错误，但是如果第二步配置了后面在main.js 引入全局样式文件时报错：This dependency was not found:@/assets/css/global.scss in ./src/main.js，原因还是新版本的 vue-cli 已经帮我们把 sass-loader 配置好了，放在 util.js 里面了。