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



前言


一、Sass

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

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

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

npm i node-sass sass-loader -D

由于sass的依赖版本上存在对应关系,可能出现以下错误:
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依赖了,

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

node12.13.0版本,cmd管理员身份运行npm install --global --production windows-build-tools
最后安装:
node-sass@4.14.1版本
sass-loader@7.3.1版本

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

在这里插入图片描述

总结

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐