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标签中加入

编译正常运行。。。。

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

问题一

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，代码如下：