现在假设我们安装好了vue-cli,然后我想在项目中使用SASS怎么办呢?
安装2个项目的依赖包
npm install --save-dev node-sass
npm install --save-dev sass-loader
之后,重新执行npm run dev
。
测试1:.vue内部书写
我们在某个.vue文件中加入下面代码测试一下,注意是scss
,不是sass
,因为SCSS语法使用大括号包裹代码,SASS用缩进,所以SCSS更为流行:
<style lang="scss">
#header {
div {
color: red;
}
}
</style>
当然了,同时我们要对应构建一个组件配合测试:
<div id="header"><div>header</div></div>
结果,果然字色变红,测试成功。就这么简单。
测试2:引入.scss文件
比如我们在某个目录新建了一个var.scss文件,作为变量存放的文件:
$header-color: red;
想要引入这个var.scss文件也很简单,完全是SCSS的语法:
<style lang="scss">
@import '../../assets/css/var.scss';
#header {
div {
color: $header-color;
}
}
</style>
同样的,测试结果也是字色变红。