常規安裝步驟：
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",
編譯不再報錯。