vue 使用scss

一时失言乱红尘 2022-10-23 12:56 310阅读 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版本

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

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

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

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

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

三、使用scss

  1. <style scoped lang="scss">
  2. .hello {
  3.     p {
  4.         color: red;
  5.     }
  6. }
  7. </style>

本文参考链接：

https://blog.csdn.net/zhouzuoluo/article/details/81010331

https://www.cnblogs.com/florazeng/p/13554174.html

发表评论

表情：
评论列表 （有 0 条评论，310人围观）

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

相关阅读

    相关 vue 使用scss

    一、概述 CSS 预处理器 SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 311 阅读