scss使用方法以及遇到的坑

最新推荐文章于 2022-12-06 17:27:42 发布
最新推荐文章于 2022-12-06 17:27:42 发布
阅读量585 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52364694/article/details/117519654
版权

一、基本使用
HbuilderX
二、坑以及解决方案、
错误1.Module build failed: Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.
原因:sass版本过高
解决：卸载原来的sass重装低版本sass。
方法:1、卸载： npm uninstall node-sass

2、安装： npm install node-sass@4.14.1

3、运行：npm run dev
错误2.scss语法错误 scss定义样式不需要";"
错误写法`$color:(
‘primary’:’#1a73e8’,
‘black’:black,
‘white’:white,
‘gray1’:’#fafafa’,
‘gray2’:rgba(26,26,26,0.5);//错误点：这里不应该有分号

)`

正确写法`$color:(
‘primary’:’#1a73e8’,
‘black’:black,
‘white’:white,
‘gray1’:’#fafafa’,
‘gray2’:rgba(26,26,26,0.5)

);`

云风xe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sass玩转颜色总结笔记
wuweitiandian的专栏
12-24 2286
变量： $color:#f00; 1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色 lighten($color,10%); darken($color,30%);                          2、颜色互补 complement(lighten($color,20%)); 3、反色函数  invert(lig
在weex中愉快的使用scss的方法步骤
10-15
在本文中，我们将深入探讨如何在Weex框架中愉快地使用SCSS，这是一种强大的CSS预处理器，能够提高我们的样式编写效率和代码可维护性。Weex是一个基于Vue或Rax的跨平台移动应用开发框架，它允许开发者用JavaScript...
Sass | 语法
GC怪兽的Blog
02-11 171
可从官网了解：http://sass-lang.com/documentation/file.SASS_REFERENCE.html 目录结构： test.scss //变量 $blue : #bdc4fd; div { coloe: $blue; } //变量(镶嵌在字符串之中) $side : left; .router { border-#{$side}-radius: 10p...
sass入门重点从安装到语法
肖肖肖丽珠的博客
09-27 736
变量 ： $变量名 后面用！default代表默认值，如果你想覆盖默认值，就在这个默认值前面在从新定义。 （默认变量的价值在进行组件化开发的时候会非常有用。） $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{line-height: $baseLineHeight;} 编译出来的结果是 body{line-h
SCSS详解
weixin_30666401的博客
08-03 286
SCSS入门 CSS预处理器 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。 CSS预处理器语言：scss（sass）、LESS等； ...
Vue - 项目中使用 scss
技术共享，共同进步！
05-12 6100
Vue - 项目中使用 scss
使用scss提示错误的解决
qq_27474555的博客
12-30 1945
使用scss提示错误的解决1、安装依赖项 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader2、解...
vue项目中使用scss的方法步骤
10-16
主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Angular中支持SCSS的方法
11-27
**Angular 中支持 SCSS 的方法** SCSS (Sassy CSS) 是 Sass 语言的一个版本，它在 Sass 3 中引入，旨在提供一个更接近 CSS3 语法的样式表语言。SCSS 兼容 CSS3 规范，允许你编写符合标准的 CSS 代码，同时也增加了...
scss使用mixin不生效(浏览器无法编译出来)的解决方法
12-14
以下是一些解决这个问题的方法和SCSS的`mixin`使用详解。 首先，让我们回顾一下`mixin`的基本语法。在SCSS中，你可以这样定义一个`mixin`： ```scss @mixin my-mixin($color) { color: $color; font-weight: ...
sass函数功能
Selina_Chan的博客
11-22 792
一、字符串函数 1、unquote()函数：删除引号 //SCSS .test1 { content: unquote('Hello Sass!') ; } .test2 { content: unquote("'Hello Sass!"); } .test3 { content: unquote("I'm Web Designer"); } .test4 {
vue-cli 项目中在main.js 引用scss 文件，在组件中应用却报错undefined
qq_36941804的博客
12-20 3280
找了很多资料，终于发现有篇文章说的比较详细 链接：https://segmentfault.com/a/1190000010324128 安装完sass依赖包： npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 然后在build文件夹下的webpac...
Syntax Error: SassError: Undefined variable: “$color-primary“.
yangbinling的博客
12-06 3989
引入‘$color-primary’后报错修改vue.config.js代码即可原代码：
SASS学习笔记
cyikns的博客
06-21 1951
Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。 特色功能(Features) 完全兼容 CSS3 在 CSS
scss引入报错问题
chuziyan的博客
03-04 836
3、打包处理scss文件 运行npm install sass-loader node-sass -D命令，在webpack.config.js的rules中添加{test:/.scss$/, user:[‘style-loader’,‘css-loader’,‘sass-loader’]} ———————————————— 版权声明：本文为CSDN博主「→_→✌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_
scss 变量_scss 变量解析不了
weixin_39790717的博客
12-08 577
scss 变量解析不了的问题，这就尴尬了，我们都知道 scss 变量是如下定义$width: "100px";我正常使用的时候，应该是如下：.box { width: $width; }是的，上面引用变量是没有任何问题的现在来看看今天碰到什么问题了呢？// 跟随换肤 @mixin bg-theme-image($url) { @each $theme-name, $theme-map...
vue使用scss方法(报错解决方案),及变换主题色
weixin_44279016的博客
03-31 4000
借鉴链接1(主要看这个) 渐渐链接2 一、首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /\.scss$/, loaders: ['style', 'css', 'sass'v] } 3.vue中使用 <style lang='scss' scoped> </style&
scss有哪些使用方法
最新发布
08-15
下面是一些SCSS的使用方法： 1. 变量：可以使用$符号定义变量，例如：$primary-color: #ff0000;。然后在样式中使用这个变量，例如：color: $primary-color;。 2. 嵌套：可以在选择器中嵌套其他选择器，例如： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值