使用scss

最新推荐文章于 2024-05-25 16:16:41 发布
最新推荐文章于 2024-05-25 16:16:41 发布
阅读量210 收藏
点赞数
分类专栏： vue 文章标签： sass css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GYHHelloWold/article/details/121925413
版权
本文记录了在开发过程中遇到的SASS编译错误，主要由于node-sass和sass-loader版本不一致导致。解决方案是锁定node版本为12.15.0，node-sass版本为4.14.1，sass-loader版本为7.1.0。通过`npm install node-sass@4.14.1 sass-loader@7.1.0`可以稳定安装并避免此类问题。
摘要由CSDN通过智能技术生成

每次总是因为sass-loader，或者node-sass的版本不一致导致安装不上，今天就备忘录一个node版本，node-sass版本和sass-loader版本。

node版本   12.15.0

node-sass：4.14.1

sass-loader：7.1.0

npm install node-sass@4.14.1
npm install sass-loader@7.1.0

功夫熊猫式浪漫style
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SASS基本特性
djp0910的博客
11-08 964
一、变量 1.1 声明变量 Sass 的变量包括三个部分： 声明变量的符号“$” 变量名称 赋予变量的值 来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量： $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7 $btn-primary-color : #fff !defaul...
scss的使用
whaleluo的博客
06-06 599
scss? sass
SCSS 基本使用详解
最新发布
2301_79262050的博客
05-25 1398
SCSS 是 Sass（Syntactically Awesome Stylesheets）的其中一种语法，是一种预处理器脚本语言，能够扩展 CSS 的功能，使其更加强大和高效。SCSS 保留了 CSS 的原有语法，同时增加了变量、嵌套规则、混合宏（mixin）、继承等高级功能。本文将详细介绍 SCSS 的基本使用方法，帮助读者快速上手并掌握 SCSS 的核心概念和技巧。
SCSS基本使用
热门推荐
10-17 4万+
Sass官网：https://www.sass.hk/docs/ Sass就是css的预处理器，它是Sass3版本中引入的新语法特性 vue中使用scss，安装： cnpm i -S node-sass sass-loader 使用： <style lang="scss" scoped> </style> 一、变量 使用$符号去声明一个变量 给同一个变量再次赋值时，后赋值的会替换先赋值的 可以在变量的结尾添加!default给一个未通过!defa...
【SCSS】SCSS入门及使用技巧
公众号：前端充电宝
06-07 1501
目录1. 什么是SCSS？2. SCSS的基本使用3. SCSS入门3.1 变量 $ 1. 什么是SCSS？ Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。 我们本文所说到的SCSS是Sass的一种语格式，这种形式仅在CSS3上进行拓展，所有的CSS3的语法都在SCSS中通用，同时还加入了Sass的特色功能。这种格
vue项目中使用scss的方法步骤
10-16
主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uni-app中使用scss的示例代码
12-14
在开发uni-app项目时，有时会遇到需要使用预处理器如SCSS的情况，SCSS是一种CSS预处理器，提供了变量、嵌套规则、混合（mixin）、函数等特性，能极大提高CSS编写效率。然而，在实际使用过程中，开发者可能会遇到一些...
在weex中愉快的使用scss的方法步骤
10-15
在本文中，我们将深入探讨如何在Weex框架中愉快地使用SCSS，这是一种强大的CSS预处理器，能够提高我们的样式编写效率和代码可维护性。Weex是一个基于Vue或Rax的跨平台移动应用开发框架，它允许开发者用JavaScript...
vue安装和使用scss及sass与scss的区别详解
10-17
SASS 使用缩进来表示嵌套关系，而 SCSS 使用花括号。例如： ```scss // SASS .father width: 100px; .son width: 50px; // SCSS .father { width: 100px; .son { width: 50px; } } ``` SCSS 提供了一些 ...
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
在 Vue-cli V3.0 中使用 SCSS/SASS 的方法 在 Vue-cli V3.0 中使用 SCSS/SASS 是一个非常重要的知识点，下面我们将详细介绍如何在 Vue-cli V3.0 中使用 SCSS/SASS。 首先，在使用 Vue-cli 生成项目时，需要勾选 ...
scss理解及用法
m0_71225058的博客
03-08 1万+
scss是一门很好用的类css，在现实中的工作当中几乎都是不采用css的，而是使用类css语言。全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；局部变量值后加上!让css更加简洁，适应性更强，阅读性更佳，更易于代码的维护等诸多好处。特性丰富，scss拥有比其他的任何css扩展语言更丰富的功能和特性。
css预处理器scss的使用&&如何全局引入
Mr.小灰狼_随笔
03-21 4113
css预处理器scss的使用&&如何全局引入 目录 scss 基本功能 1、嵌套 2、变量 $ 3、@mixin 和 @include 4、@extend 5、@import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件
scss用法总览
weixin_50557122的博客
06-16 2324
1.动态样式语言：也称为预编译样式语言，指在CSS基础之上添加一些动态语言的特性，如变量、运算符、函数等，可以极大的提高样式代码的编写效率和可维护性。 2.当前主流动态样式语言有三种： ①Sass：最早诞生，功能最全面 —— Bootstrap4之后使用 ②Stylus：功能强大，但是语法稍复杂 ③Less：语法简单 —— Bootstrap3之前使用 3. Sass：Syntactically Awesome Stylesheets，是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量
scss的基本使用
好事多磨
06-06 3万+
总结一些scss基本使用 具体详情请看官网less, sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大。预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。细节：我们在实际开发过程中，scss是常用写法内容：嵌套语法； &父选择器；变量；mixins；模块和less一样，scss同样支持嵌套型的语法 转化成css后定义变量：sass使用$符号来标识
scss用法最全简述
Shaoyouiqng的博客
06-01 2706
sass 一、什么是 sass Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。 二、安装 sass https://sass.bootcss.com/install node.js 下 npm install -g sass mac 系统： gem install sass windo
scss基本使用
我是一颗草，哪里荒凉往哪里长
12-28 3149
符号标识来定义变量变量名用中划线和下划线分隔其实是表示一个意思$color_base和$color-base其实指向的是同一个变量。父选择器的标识符&div{color:red;&:hover{}}群组选择器的嵌套//css使用}// sass嵌套使用.aaa{h1,h2,h3{}}h2{}}子组合选择器和同层组合选择器：>、+ 和 ~// 子组件选择器// 选择 .aaa 的子元素中的 p 标签.aaa > p{}// 选择 .aaa下所有的 p 标签。
如何使用SASS
storyoco的博客
06-27 6202
1.背景介绍 1.1什么是Sass Sass 是一款强化 CSS 的辅助工具，是预编译器。它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能。 1.2诞生背景 CSS不是一个完美的语言。CSS简单易学，却也能迅速制造严重的混淆，尤其是在工程浩大的项目中。这就是 Sass 出现的契机，作为一种元语言，通过提供额外的功能和工具可以改善 CSS 的语法。同时，保留了 CSS 的原有...
scss的简单使用方法
html_xiaojiu的博客
08-17 2161
scss的简单使用方法 前言：对于不同的开发环境都需要添加scss的插件下面就Hbulider/vscode的插件配置简单的说明一下 Hbulider的设置 VScode的配置： 注意：format：compressed 和extension：.min.css是生成的是压缩的css文件 不用的话可以注释了 重启软件就不会生成了 vscode的scss插件在modul的时候可能会有点问题 解决办法是使用Hbulider或者是在vscode中安装其他的scss插件l //这是scss文件的内容 $fon
jsx使用 scss
05-27
在使用 JSX 的 React 项目中，可以使用 SCSS 作为样式文件的语法。为了使用 SCSS，需要在项目中安装 node-sass 和 sass-loader 两个依赖项。 1. 安装依赖： ``` npm install node-sass sass-loader --save-dev ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值