vue项目使用Sass（scss）_vue sass

基于vue/cli3.0+脚手架搭建Vue项目(07)

---

---

前言

---

一、Sass

使用广泛的CSS扩展语言中，可根据自己的使用习惯，自行选择Sass，Less，Stylus中的一种便可

二、Sass相关依赖的安装和使用

1.node-sass、sass-loader依赖的安装

npm i node-sass sass-loader -D
1

由于sass的依赖版本上存在对应关系，可能出现以下错误：
Error: Can't find Python executable "python", you can set the PYTHON env variable.
可以在电脑上搜索cmd，然后右键

以管理员身份运行

npm install --global --production windows-build-tools
1

当出现Successfully installed Python 2.7说明安装成功

最后便可以重新安装上面的sass依赖了，

如果还是报错， 建议使用以下版本配对：

node12.13.0版本，cmd管理员身份运行npm install --global --production windows-build-tools
最后安装：
node-sass@4.14.1版本
sass-loader@7.3.1版本
1
2
3
4

三、Sass验证

<template>
  <div class="demo">
    <span class="demo-title">人有冲天之志，非运不能自通</span>
  </div>
</template>
<style lang="scss" scoped>
.demo {
  .demo-title {
    font-size: 20px;
    color: Chocolate;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

总结

人有冲天之志，非运不能自通。–《寒窑赋》