vue项目使用Sass（scss）

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

---

文章目录

• 基于vue/cli3.0+脚手架搭建Vue项目(07)
• 前言
• 一、Sass
• 二、Sass相关依赖的安装和使用
• • 1.node-sass、sass-loader、style-loader依赖的安装
  • 2.新建webpack.config.js，并配置loader
• 三、Sass验证
• 总结

---

前言

---

一、Sass

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

二、Sass相关依赖的安装和使用 1.node-sass、sass-loader、style-loader依赖的安装

npm i node-sass sass-loader style-loader -D

如果出现以下错误：
Error: Can't find Python executable "python", you can set the PYTHON env variable.
可以在电脑上搜索cmd，然后右键“以管理员身份运行”运行：

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

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

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

2.新建webpack.config.js，并配置loader

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

三、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>

总结

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