vue项目使用sass，sass与scss异同

旧城等待， 2021-08-13 11:11 486阅读 0赞

scss是sass3引入的新语法，语法完全兼容css3,也完全继承了sass的功能，也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。

唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。

**在vue中使用sass**

第一步安装依赖包

npm install sass-loader  --save-dev
    npm install node-sass --save-dev

第二步配置识别sass

在build文件中webpack.base.conf.js文件module.rules中给数组添加一个对象，解释scss文件的loader

{ 
         //配置编译识别sass! 
         test: /\.scss$/,
         loaders: ["style", "css", "sass"]
      }

第三步使用

<style lang="scss" scoped >
        $fontColor:red;
        .box1{
            color:$fontColor;
        }
        @mixin normStyle($width,$height,$bgcolor){
            width:$width;
            height:$height;
            background:$bgcolor;
        }
        .box2{
            @include normStyle(200px,200px,green);
        }
    </style>

使用vscode的时候需要安装，如不安装声明变量的时$符号会报红，虽然不影响运行，但极不美观

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/7c53eae5b8414d5a991d63645fa1a788.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

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

相关阅读

相关 vue3项目安装scss并使用

1.sass-loader依赖于node-sass，所以要安装node-sass npm install node-sass@4.14.1 --save-dev

分手后的思念是犯贱/ 2024年03月24日 19:33/ 0 赞/ 98 阅读

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览

蔚落/ 2023年07月06日 13:16/ 0 赞/ 13 阅读

相关 vue 使用scss

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

一时失言乱红尘/ 2022年10月23日 12:56/ 0 赞/ 215 阅读

相关 vue 使用 scss 的坑

vue 使用 scss 的坑 > 日常记录开发中遇到的坑 1、使用 npm install sass-loader node-sass --save-dev 进

快来打我*/ 2022年10月17日 05:29/ 0 赞/ 196 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 274 阅读

相关 vue中全局使用scss

在vue中全局使用scss需要先安装 sass-resources-loader，使用npm install sass-resources-loader --save-dev

港控/mmm°/ 2022年05月08日 05:28/ 0 赞/ 366 阅读

相关 vue 安装使用 scss

使用vue-cli2创建的项目，如果直接将style标签中添加lang=“scss”，会有一堆报错！！ <style lang="scss" scoped> </st

た入场券/ 2021年11月23日 11:31/ 0 赞/ 374 阅读

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览

怼烎@/ 2021年09月15日 16:42/ 0 赞/ 589 阅读

相关 vue项目使用sass，sass与scss异同

scss是sass3引入的新语法，语法完全兼容css3,也完全继承了sass的功能，也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCS

旧城等待，/ 2021年08月13日 11:11/ 0 赞/ 487 阅读

相关 vue 使用sass/scss

1、安装 cnpm install sass-loader@7.3.1 --save-dev //8.0版本太高会报错(web3.x版本) cnp

左手的ㄟ右手/ 2021年07月24日 11:44/ 0 赞/ 532 阅读