关于Vue项目安装和使用Scss的简单操作_style要用lang="scss"要下载什么插件

一、安装依赖（指定低版本安装）

        由于npm安装一些包的时候，会默认安装最新版本，但过对于sass来说版本过高会导致scss编译错误。所以本文在安装依赖的时候指定了低版本进行安装。

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev

二、在build文件夹下的webpack.base.conf.js的rules里面添加配置 

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

        至此，我们在编写样式的时候就可以套娃啦。

注：Sass只是扩展CSS，并生成良好格式化的 CSS 代码，易于组织和维护。但其中样式数据无法在浏览器上直接运行，最后还是会编译出合法的CSS让浏览使用。

 三、在vue文件中使用

<template>
  <div class="main">
    <div class="hello">不过匆匆过客罢了</div>
  </div>
</template>
...
<style lang="scss">
$color: red;
$fontColor: #fff;
.main {
  .hello {
    background: $color;
    color: $fontColor;
  }
}
</style>

四、附上卸载方法

npm uninstall sass-loader
npm uninstall node-sass

五、推荐vscode插件（Live Sass Compiler）

主要功能是监听并实时编译scss文件，输出css文件，建议配合Live Server使用，能帮助更好的进行对页面样式的编写。

如下：.css 和.css.map文件为自动生成