vue项目使用Sass(scss)
vue项目使用Sass(scss)
·
基于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>
总结
人有冲天之志,非运不能自通。–《寒窑赋》
更多推荐
已为社区贡献4条内容
所有评论(0)