vue-cli项目中使用sass

一.什么是sass：(在项目中使用scss，下面会有提到)

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它 可以使用变量、常量、嵌套、混 入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法 的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为 它不是标准的CSS格式，在它的 语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。 其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一 样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

注：简单的说，sass就是一个框架，方便css的编写，它会使用简单的书写模式，来生成css

二.安装sass：
1.安装sass依赖：

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

2.在项目build目录下打开webpack.base.conf.js文件，在modul下的rules中加入：

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

注：加入这句话，webpack会去识别所有带.scss的文件，将它们转换成css文件

3.使用sass:

注：scoped表示只在当前组件中使用该style样式

4.sass的简单应用/介绍：

<!--例子：一个html页面一个div里嵌套一个h1和一个div-->
<div class="panel'>
	<h1>HELLO</h1>
	<div>ok</div>
</div>

<style lang="scss" scoped>
    .panel{
		width:100%;
		margin:0px;
			h1{//等价于：.panel h1{}
				font-size:20px;
			}
			div{//等价于：.panel div{}
				width:60%;
			}
	}
</style>