vue 安装scss

常规安装步骤：

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

在build\webpack.base.conf.js rule中添加

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

在style标签中加入

  <style lang="scss"></style>

编译正常运行。。。。

可惜我的不正常，安装过程中出现的一些问题：

问题一

  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0
  SDK；2) 安装 Microsoft Visual Studio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置
  添加到系统路径中。 [D:\software\npmcache\prefix\node_modules\node-sass\build\binding.sln]
  已完成生成项目“D:\software\npmcache\prefix\node_modules\node-sass\build\binding.sln”(默认
  目标)的操作 -
  失败。
  生成失败。
  “D:\software\npmcache\prefix\node_modules\node-sass\build\binding.sln”(默认目标) (1) ->   
  (_src_\libsass 目标) -> 
  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.
  0 SDK；2) 安装 Microsoft Visual Studio 2005；或 3) 如果将该组件安装到了其他位置，请将其位 
  置添加到系统路径中。 [D:\software\
  npmcache\prefix\node_modules\node-sass\build\binding.sln]

错误原因：缺少windows构建插件
解决方法：在命令行工具中运行：

  npm install –global –production windows-build-tools （全局安装windows构建工具）

注意：一定要使用管理员打开命令才有权限构建工具

问题二：

  Module build failed:
  #top_menu {
            ^
        Invalid CSS after "#top_menu {": expected "}", was "{"
        in F:\demo-hui\src\components\TopMenu.vue (line 24, column 12)

   @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-            91b6ff58","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TopMenu.vue 4:14-398 13:3-17:5 14:22-406

这个问题涉及到 sass 和 scss 的区别。sass 的语法规则是一种缩进语法。而 scss 语法与 css 语法相近，使用大括号。上面那个例子中，home.vue 文件中的 style 标签，lang 属性设置成了 sass，代码如下：

  <style lang="sass" rel="stylesheet/scss" scoped>

然而 style 标签里面的内容是scss，这导致了编译器报错。所以为了解决这个问题，需要把上面的代码改成如下形式：

  <style lang="scss" rel="stylesheet/scss" scoped>

lang 属性变成 scss，所有关于语法的地方都设置成 scss，这样问题就解决了。

问题三

  ERROR  Failed to compile with 1 errors                                              4:16:32 ├F10: PM┤
   error  in ./src/App.vue

  Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The       "path" argument 
  must be of type string. Received undefined
      at validateString (internal/validators.js:120:11)
      at Object.join (path.js:375:7)
      at getSassOptions (E:\study-in-company\node_modules\sass-loader\dist\utils.js:160:37)
      at Object.loader (E:\study-in-company\node_modules\sass-loader\dist\index.js:36:49)

   @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-      7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
   @ ./src/App.vue
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://localhost:8080       webpack/hot/dev-server ./src/main.js

这个错误是sass-loader 版本造成的，此时的版本是

  "sass-loader": "^10.0.1",

修改版本为

  "sass-loader": "^8.0.2",

然后报以下错误：

  Failed to compile with 1 errors            17:08:39

   error  in ./src/components/HelloWorld.vue

  Module build failed: TypeError: loaderContext.getResolve is not a function
      at getWebpackImporter (F:\demo-hui\node_modules\sass-loader\dist\utils.js:274:37)
      at Object.loader (F:\demo-hui\node_modules\sass-loader\dist\index.js:42:61)

   @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-375 13:3-17:5 14:22-383
   @ ./src/components/HelloWorld.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 
  webpack/hot/dev-server ./src/main.js

然后修改版本为

  "sass-loader": "^7.3.1",

编译不再报错。