vue 使用scss

一时失言乱红尘 2022-10-23 12:56 129阅读 0赞

# 一、概述 #

## CSS 预处理器 ##

SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性(完全兼容css3)，让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

## SCSS和SASS区别 ##

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

# 二、安装scss #

**指定sass-loader版本**

npm install node-sass sass-loader@7.3.1 style-loader --save-dev

注意：默认会安装最新版本，启动后会报错：

Module build failed: TypeError: this.getOptions is not a function

由于新版本有较大改动，因此安装老版本，可以避免上面的错误。

**如果已经安装了高版本sass-loader，请手动修改package.json，将版本修改为7.3.1，并删除整个node\_modules目录，执行npm install命令，重新安装一次即可。**

# 三、使用scss #

本文参考链接：

[https://blog.csdn.net/zhouzuoluo/article/details/81010331][https_blog.csdn.net_zhouzuoluo_article_details_81010331]

[https://www.cnblogs.com/florazeng/p/13554174.html][https_www.cnblogs.com_florazeng_p_13554174.html]

[https_blog.csdn.net_zhouzuoluo_article_details_81010331]: https://blog.csdn.net/zhouzuoluo/article/details/81010331
[https_www.cnblogs.com_florazeng_p_13554174.html]: https://www.cnblogs.com/florazeng/p/13554174.html

vue 使用scss

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue3项目安装scss并使用

相关 vue 导入全局scss

相关 vue 使用scss

相关 vue 使用 scss 的坑

相关 vue——scss变量全局使用

相关 vue中全局使用scss

相关 vue使用scss，并且全局引入公共scss样式

相关 vue 全局使用scss 变量

相关 vue 安装使用 scss

相关 vue 使用sass/scss