error sass/styles.scss (Line 4: Invalid CSS after "銆€銆€": expected "{", wa s "}")

最新推荐文章于 2024-01-26 10:28:12 发布
最新推荐文章于 2024-01-26 10:28:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： web前端工程师 文章标签： sass compass css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bixuyu0001/article/details/51603554
版权
本文介绍了解决使用CompassWatch编译SCSS文件时遇到的编译错误的方法，主要是由于SCSS文件中存在空格问题导致，解决方式为删除所有引起错误的空格。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们在用compass watch编译scss文件的时候会遇到上述错误，其实就是scss文件里面的空格问题，所有空格都删掉。
CSS预处理器sass和less
weixin_68658847的博客
02-21 2607
CSS预处理器sass和less
SpringBoot实践（二十）：使用Vue快速实现后台管理系统（仅前端）
叶子叶来
04-15 2300
使用vue快速地开发一套后台管理系统，入门级别，对于登录和首页可以自行优化，代码地址：https://github.com/yezonggang/vue-for-backend
Semi-colon expected (eclipse 引入 json文件报错)
weixin_30597269的博客
09-29 1600
最近做的项目用到的前端框架有一个json文件夹，里面全是json文件，所以导入Eclipse的时候会在整个项目上都是红叉，但是其实不影响项目运行的，之前忙着码代码也没时间管他，这个红叉存留了一个月！今天完成了一个功能越看这个红叉越不顺眼，于是开始折腾了。 ①错误原因： 原来是因为Eclipse会自动帮我们校验js文件，发现格式不支持，自然就报错了。 ②解决方案： window-...
编写css时出现 colon expected css 错误的解决方法
codeuniverse的博客
08-08 2869
编写css时出现 colon expected css 错误的解决方法
semi-colon expectedcss(css-semicolonexpected)报错解决
web15772257211的博客
02-22 2636
1.出现背景： 我拷贝了他人页面的的代码，但是style中css区域报错，点击上去提示：semi-colon expectedcss(css-semicolonexpected) 1.解决思路： 1.首先百度问题，有说是因为括号处有多余空格，（经检查没有） 2.但查看每条代码，发现报错处上一条cursor没有写完，没有对应属性，删除就可以了 ...
sass/scss错误Deprecation Warning的解决办法
xiaowu0929的博客
01-26 2845
第一次遇到，究其原因是Sass版本的问题，参考多种解决办法后，采用了限制sass版本的办方式，package.json中设置 "sass": "~1.32.12"。当然，在我查到的文档中，还有其他两种解决方式，地址如下，诸君自取。
2021-09-19 问题 私有前缀 错误提示{ expected css(css-lcurlyexpected) HTML中让段落自动空两格 竖列选择
xxxxxxxr的博客
09-19 3246
vscode 提示{ expected css(css-lcurlyexpected) css错误提示{ expected css(css-lcurlyexpected) 查看右下角的语言改成Vue 浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器无须添加。 私有前缀 -moz-:firfox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:v8引擎系列 safari、chrome私有属性 -o-:代表Opera私有属性 写法 -moz-border-radius:1.
【Vuetify】TS 配置 Vuetify 时 SASS 编译失败
hxw3274743的博客
11-06 1639
TS 的 Vue 项目引入 Vuetify 时 SASS 编译失败，报错 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after " @content": expected "}", was ... 如何解决
node-sass编译scss文件`@charset utf-8`报错的解决办法
CRPER
03-07 9212
gulp-sass设置编码@charset 'utf-8' 报错的解决方案
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
expectedcss(css-rcurlyexpected) 错误
weixin_53483088的博客
06-14 1590
style标签默认css语法，我们在写样式中使用了css外的语法，就会报错。// lang设置为自己需要的语法，比如scss、less等。
HTML页面出现乱码 銆€銆€ 的可能的原因
qq_42148348的博客
04-01 3654
乱码銆€銆€比较有规律的出现在段落的前面，查看后，发现是 css 中出现的问题。 空格一般分为半角空格和全角空格。平常我们在网页上打字时，敲击一下空格，显示的是半角空格(“ ”)，仅相当于一个小写字母的大小。这就需要另一种空格——全角空格了(“　”)。 删除空格，重新整理格式段落。 ...
vscode css错误提示{ expected css(css-lcurlyexpected)
qq_43650979的博客
07-09 2万+
如果是在vue中使用less或者sass, css错误提示{ expected css(css-lcurlyexpected) 查看右下角的语言是不是Vue 如果不是，需要改成Vue
Scss--@import--使用/实例
热门推荐
IT利刃出鞘的博客
07-28 2万+
本文介绍Scss的@import的用法。
} expectedcss(css-rcurlyexpected)
weixin_42789120的博客
03-31 1万+
} expectedcss(css-rcurlyexpected)----我出现这个错误的原因是没有在style中添加lang=less，添加后变为正常
ERROR in ./src/styles.scss .. Module build failed: Error: Cannot find module 'node-sass'
隔壁老瓦的专栏
03-30 2万+
ERROR in ./src/styles/Scrollbars.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/lib/loader.js!./src/styles/Scrollbars.scss) Module ...
下面这个报错如何解决：Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 1 │ @import './common'; │ ^^^^^^^^^^ ╵ src/components/VxeTable/src/css/index.scss 1:9 root stylesheet Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 2 │ @import './variable'; │ ^^^^^^^^^^^^ ╵ src/components/VxeTable/src/css/index.scss 2:9 root stylesheet Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 3 │ @import './toolbar'; │ ^^^^^^^^^^^ ╵ src/components/VxeTable/src/css/index.scss 3:9 root stylesheet Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 4 │ @import './component'; │ ^^^^^^^^^^^^^ ╵ src/components/VxeTable/src/css/index.scss 4:9 root stylesheet Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 5 │ @import 'vxe-table/styles/all'; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ src/components/VxeTable/src/css/index.scss 5:9 root stylesheet Warning: 1 repetitive deprecation warnings omitted.
最新发布
03-19
<think>好的，我现在需要帮助用户解决Dart Sass中的弃用警告问题，特别是关于旧版JS API和@import规则的使用。首先，我需要确认用户的问题是什么，然后找出正确的迁移步骤。 用户提到两个警告：一个是关于使用除法符号/被弃用，另一个是关于@import规则和旧版JS API被弃用。用户希望了解如何迁移以避免这些警告。我需要回忆Sass的官方文档和相关迁移指南。 首先，关于@import规则的弃用。Sass官方在Dart Sass 1.23.0版本开始引入@use和@forward规则，并计划逐步弃用@import。因此，用户需要将现有的@import替换为@use或@forward。这一步可能涉及到修改现有的Sass文件结构，特别是部分文件（partials）的引用方式。例如，原来的@import 'variables';需要改为@use 'variables';，并且可能需要使用命名空间来访问变量、混合宏等。 其次，旧版JS API的弃用。Dart Sass现在推荐使用新的JavaScript API，即sass.compile和sass.compileAsync方法，而不是之前的render和renderSync。用户需要检查他们的构建工具或脚本，将调用旧API的地方更新为新API。例如，替换sass.render()为sass.compile()，并注意参数的变化，比如不再需要data或file选项，而是直接传递路径或字符串。 另外，用户提到的除法运算符/的问题。在Dart Sass 2.0.0之后，使用/进行除法运算需要更明确的写法，要么使用math.div()函数，要么在运算周围加上括号并保持除法符号两侧有变量或值。例如，将width: $width / 2;改为width: math.div($width, 2);或者width: ($width) / 2;。 接下来，我需要将这些步骤整理成清晰的迁移步骤，确保用户能够逐步操作。同时，要提醒用户检查他们的构建工具是否支持新的Sass版本，可能需要更新相关的插件或加载器，比如Webpack中的sass-loader或者Gulp的gulp-sass插件，确保它们使用最新的Dart Sass版本。 可能还需要注意命名空间的使用，当使用@use引入模块时，默认情况下成员需要通过命名空间访问。如果用户希望直接访问变量，可以使用@use 'module' as *;，但官方建议使用显式命名空间以避免冲突。此外，私有成员（以_开头的变量或混合宏）不会被导入，这也是需要注意的地方。 关于旧版JS API的迁移，用户需要修改他们的Node.js脚本，将原来的render方法替换为compile，同时调整参数结构。例如，原来的options对象中的data或file属性需要改为使用字符串或路径参数。新的API返回的结果结构也可能有所不同，需要用户调整代码以正确获取编译后的CSS。 最后，生成相关问题，帮助用户进一步了解迁移过程中可能遇到的其他问题，比如如何处理第三方库的兼容性，或者如何重构大型项目的Sass代码结构。这些相关问题应该与用户的问题紧密相关，并提供额外的信息链接或资源。</think>### 解决Dart Sass弃用警告的迁移步骤 #### 1. 弃用警告说明 - **@import规则弃用**：自Dart Sass 1.23.0起，推荐使用`@use`和`@forward`替代`@import`，因为后者可能导致命名冲突和重复加载[^1]。 - **旧版JS API弃用**：Dart Sass 2.0.0弃用了`render()`和`renderSync()`，改用更高效的`compile()`和`compileAsync()`。 - **除法运算符弃用**：使用`/`进行除法需替换为`math.div()`或调整语法。 --- #### 2. 迁移步骤 ##### (1) 替换`@import`为`@use`/`@forward` 1. **基础替换**： ```scss // 旧写法 @import 'variables'; @import 'mixins'; // 新写法 @use 'variables'; @use 'mixins'; ``` 访问变量需加命名空间（默认文件名）： ```scss .header { color: variables.$primary-color; } ``` 2. **控制命名空间**： ```scss @use 'buttons' as btn; // 自定义命名空间 .submit { @include btn.style; } ``` 3. **转发模块**： 使用`@forward`在入口文件统一导出： ```scss // _all.scss @forward 'variables'; @forward 'mixins'; ``` ##### (2) 更新除法运算符 ```scss // 旧写法（触发警告） $width: 1200px; .container { width: $width / 2; } // 新写法（二选一） @use 'sass:math'; .container { width: math.div($width, 2); // 方法1：使用math.div() width: ($width) / 2; // 方法2：添加括号 } ``` ##### (3) 迁移旧版JS API 旧版代码示例： ```javascript const sass = require('sass'); sass.render({ file: 'src/app.scss', outputStyle: 'compressed' }, (err, result) => { if (err) throw err; console.log(result.css.toString()); }); ``` 新版代码： ```javascript const sass = require('sass'); try { const result = sass.compile('src/app.scss', { style: 'compressed' }); console.log(result.css); } catch (error) { console.error(error); } ``` --- #### 3. 验证工具 1. **Sass迁移器**： ```bash npx sass-migrator division --verbose style.scss npx sass-migrator module --verbose src/ ``` 此工具自动修复除法和模块语法。 2. **构建工具升级**： - Webpack：更新`sass-loader`至v12+，配置如下： ```javascript { loader: 'sass-loader', options: { implementation: require('sass') } } ``` - Gulp：升级`gulp-sass`至v5+： ```javascript const gulpSass = require('gulp-sass')(require('sass')); ``` --- #### 4. 常见问题 - **第三方库兼容性**：若依赖的库仍用`@import`，临时允许兼容模式： ```scss @use 'library' with ($legacy-import: true); ``` - **全局变量冲突**：通过`@use ... as *`导入全局变量： ```scss @use 'variables' as *; // 直接使用$primary-color ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值