sass版本错误 Recommendation: math.div($grid-gutter, 3) or calc($grid-gutter / 3)

最新推荐文章于 2025-10-13 09:32:13 发布
原创 最新推荐文章于 2025-10-13 09:32:13 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sass #css #vue.js

在尝试导入Sass时遇到控制台报错警告，问题根源被识别为版本差异。降级到1.32.12版本后，警告消失，程序运行正常。这表明特定版本的Sass可能存在兼容性问题。

今天在导入sass的时候出现这么一个错误 不耽误运行  但是控制台报了一堆警告

然后在一篇帖子上看到是版本的原因

降低到1.32.12确实不报错了 

 

hmbbpdx
关注
springcloud报错Cannot resolve org.springframework.cloud:spring-cloud-starter-netflix-zuul:unknown
邓邓子的博客
02-18 3191
1、问题 Spring Cloud 引入 zuul 依赖时报错： Cannot resolve org.springframework.cloud:spring-cloud-starter-netflix-zuul:unknown 2、解决方法 版本问题，将 springboot 版本由 2.6.3 改为 2.2.4.RELEASE，将 springcloud 版本由2021.0.0 改为 Hoxton.SR12，问题解决。 ...
mathsass：数学功能的Sass实现
02-05
MathSass Sass实现的数学函数。 安装 吉特 git clone git@github.com:terkel/mathsass.git && cd mathsass 凉亭 bower install mathsass --save-dev npm npm install mathsass --save-dev 用法 将dist/_math.scss部分导入Sass文档。 @import " path/to/dist/math " ; .content { height : 200 px ; width : 200 px / tan ( 60 deg ); //
sass报错:Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
小马甲
09-01 6603
不懂是为什么，反正我的项目是uniapp的vue2的版本，然后sass原来在package.json里的版本是^1.26.11，但是实际安装的是1.34+的版本了。查资料都是说让用math.div，但是其实都没有作用。要嘛说是@use地方要在头部，要嘛说@use要放在uni.scss中，还有说是使用sass-migrator官方的工具库来批量替换写法。最后反正我是将sass版本固定为1.23.13，就不会出现告警了。
解决Sass编译报错：Bootstrap-sass 3.4.3 math.div表达式修复指南
gitblog_01005的博客
10-13 400
你是否在升级Sass编译器后遇到大量`math.div`相关的编译错误？Bootstrap-sass 3.4.3版本针对这一问题提供了关键修复。本文将详细解析问题根源、修复内容及实施步骤，帮助开发者快速解决样式编译故障。 ## 问题背景：从除法运算到math.div的迁移 Sass（Syntactically Awesome Style Sheets，语法很棒的样式表）在3.0版本引入了`ma...
scss 提示 SassError: There is no module with the namespace “math“.
学习笔记
07-19 5004
scss 提示 SassError: There is no module with the namespace “math”. 参考问题： https://stackoverflow.com/questions/61330432/sasserror-there-is-no-module-with-the-namespace-math 在使用 scss 的时候，使用了一些 math 上的方法，比如除以 math.div() math.floor 等，就会出现这样的错误 SassError: There
uview-ui项目暗黑模式（笔记）
weixin_42998230的博客
03-02 2196
1、main.js import mixin from '@/common/js/setTheme.js' Vue.use(mixin) // import {getTheme} from '@/common/js/setTheme.js'; // Vue.prototype.$theme = getTheme; 2、App.vue //监听系统主题变化 onThemeChange(e){ this.getTheme() }, 3、setTheme.js import { isEmpty } fro
recommendation
qq_37175369的博客
01-25 542
分享个做推荐的博客入门 https://qiufengyu.github.io/categories/Recommendation/
精选资源
完美解决node-sass@4.14.1 postinstall: `node scripts/build.js` 问题
09-01
当开发者在使用node-sass这个流行的Node.js库时，尤其是在Windows平台上，可能会遇到一个特定的安装问题，这个问题通常出现在尝试安装node-sass@4.14.1版本时，在执行npm的postinstall脚本阶段。问题的本质在于构建...
精选资源
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
node-sass@4.7.2 postinstall: `node scripts/build.js`
qq 117791303
01-13 1439
node-sass@4.7.2 postinstall: `node scripts/build.js`
vue项目使用scss时报错
暖一杯茶的博客
11-09 692
vue项目使用scss，需要安装 node-loader 和 sass-loader 命令：npm install node-loader --save-dev 和 npm install sass-loader --save-dev 然后运行项目报错：Module build failed: TypeError: this.getResolve is not a function 原因：sass版本太高，导致webpack编译时出错，此时需要卸载当前版本重新安装低版本即可。（可在package.json文
math-竖式除法longdiv
A Flying Bird
06-23 4602
整数竖式除法longdiv
vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换
学习笔记
03-28 8873
vue node-sass 安装失败，如何解决，使用 sass 替换 问题 package.json "node-sass": "^xx.xx.xx", "sass-loader": "^xx.xx.xx", vue 项目中，安装依赖的时候出现错误，如下： error D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-sass: Command failed. Exit code: 1 Command: node scripts/build.
vue启动报错
qq_42766445的博客
07-05 1262
解决vue启动报错问题
‘vue-cli-service‘ 不是内部或外部命令，Cannot read properties of null (reading ‘pickAlgorithm‘)_（2022-04-06）
鲁迷那的专栏—坚持实践后再写出来！
04-06 8367
报错信息： 报错1： 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。 报错2： Cannot read properties of null (reading ‘pickAlgorithm‘) Windows PowerShell 版权所有 (C) Microsoft Corporation。保留所有权利。 尝试新的跨平台 PowerShell https://aka.ms/pscore6 PS D:\workspace\zsh_code..
大屏适配方案------SCSS函数
lijingyu001的博客
09-08 1662
math.div接收两个参数，1除数，2被除数，math还有其他方法，类似js中Math的方法，具体用法请看官方文档。
Sass系统学习
Kate_sicheng的博客
06-23 2809
一、变量 二、嵌套 三、父选择器 & 父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。 四、插值 #{表达式} 用来输出或计算一个表达式的内容。字符串与变量的拼接使用 。 常用于在写mixins时根据传入的参数创建选择器。 五、函数 @function 和 @return 和 结合，用于定义可在 SassScript 表达式中使用的自定义函数，函数最后通过@......
vue安装依赖后sass大量警告报错
a329715712的博客
01-30 3496
vue sass 版本出现大量警告报错
Using / for division is deprecated and will be removed in Dart Sass 2.0.0._@jie
tattoo_jie的博客
12-31 4317
问题描述 新写项目编译时，遇到sass语法报错，现已解决，记录一下 EPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($px, $html-font-size) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 18
[root@yfw jsxc-master]# cat package.json | grep -A 10 "scripts" "scripts": { "start": "yarn build", "watch": "webpack --progress --config webpack.config.js --mode development --watch", "build": "webpack --progress --config webpack.config.js --mode production", "build:dev": "webpack --progress --config webpack.config.js --mode development", "build:release": "webpack --progress --config webpack.config.js --mode production --release", "build:analyze": "webpack --progress --config webpack.config.js --mode development --bundleAnalyzer", "dev": "webpack serve --mode development", "test": "karma start --single-run", "fix": "run-p --continue-on-error --print-label fix-*", "fix-typescript-format": "eslint \"src/**/*.ts\" --fix && prettier src/ --write", -- "prepare-commit-msg": "node scripts/prepare-commit-msg.js HUSKY_GIT_PARAMS", "pre-commit": "run-s lint:staged checking-typescript", "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }, "lint-staged": { "src/*": [ "eslint", "prettier --check" ], "scss/*": [ [root@yfw jsxc-master]# npm run dev > @jsxc/jsxc@4.4.0 dev /www/wwwroot/szrengjing.com/jsxc/jsxc-master > webpack serve --mode development git: 'git' is not a git command. See 'git --help'. The most similar command is init [Git] Not available: Command failed: git git rev-parse HEAD git: 'git' is not a git command. See 'git --help'. The most similar command is init ℹ ｢wds｣: Project is running at http://localhost:8091/ ℹ ｢wds｣: webpack output is served from /dist/ ℹ ｢wds｣: Content not from webpack is served from /www/wwwroot/szrengjing.com/jsxc/jsxc-master Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-gutter-width, 2) or calc($grid-gutter-width / 2) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 368 │ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss 368:43 @import scss/vendor/_all.scss 25:9 @import scss/main.scss 13:9 root stylesheet Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($navbar-height - $line-height-computed, 2) or calc(($navbar-height - $line-height-computed) / 2) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 369 │ $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss 369:37 @import scss/vendor/_all.scss 25:9 @import scss/main.scss 13:9 root stylesheet Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($line-height-computed - 1, 2) or calc(($line-height-computed - 1) / 2) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 43 │ padding: (($line-height-computed - 1) / 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss 43:13 @import scss/vendor/_all.scss 51:11 @import scss/main.scss 13:9 root stylesheet Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($line-height-computed, 2) or calc($line-height-computed / 2) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 44 │ margin: 0 0 ($line-height-computed / 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss 44:16 @import scss/vendor/_all.scss 51:11 @import scss/main.scss 13:9 root stylesheet Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($gutter, 2) or calc($gutter / 2) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 7 │ padding-right: ceil(($gutter / 2)); │ ^^^^^^^^^^^ ╵ node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid.scss 7:24 container-fixed() node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss 11:3 @import scss/vendor/_all.scss 52:11 @import scss/main.scss 13:9 root stylesheet Warning: 10 repetitive deprecation warnings omitted. ⚠ ｢wdm｣: assets by path images/emojione/*.svg 3.05 MiB 1832 assets assets by path images/icons/*.svg 95.1 KiB 42 assets assets by path images/filetypes/ 29.9 KiB 40 assets assets by path example/ 249 KiB 12 assets assets by path images/*.svg 14.8 KiB 9 assets assets by path assets/ 262 KiB 6 assets assets by path images/emoticons/*.svg 36.7 KiB 6 assets assets by path images/presence/*.svg 9.21 KiB 5 assets assets by path sound/ 102 KiB 4 assets assets by path fonts/ 28 KiB 4 assets assets by chunk 12.8 MiB (name: main) asset jsxc.bundle.js 12.5 MiB [emitted] [big] (name: main) asset styles/jsxc.bundle.css 298 KiB [emitted] (name: main) 4 assets Entrypoint main [big] 12.8 MiB (262 KiB) = styles/jsxc.bundle.css 298 KiB jsxc.bundle.js 12.5 MiB 6 auxiliary assets runtime modules 1.65 KiB 9 modules javascript modules 4.26 MiB modules by path ./node_modules/ 3.05 MiB 267 modules modules by path ./src/ 1.12 MiB 226 modules modules by path ./template/ 95.6 KiB modules by path ./template/*.hbs 95.1 KiB 30 modules modules by path ./template/helpers/*.js 535 bytes 2 modules modules by path ./sound/*.mp3 158 bytes 3 modules modules by path ./images/ 106 bytes ./images/XMPP_logo.png 52 bytes [built] [code generated] ./images/icons/placeholder.svg 54 bytes [built] [code generated] json modules 461 KiB 30 modules css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/sass-loader/dist/cjs.js!./scss/main.scss 297 KiB [built] [code generated] WARNING in ./node_modules/strophe.js/dist/strophe.umd.js 66:44-71 Module not found: Error: Can't resolve 'xmldom' in '/www/wwwroot/szrengjing.com/jsxc/jsxc-master/node_modules/strophe.js/dist' @ ./src/vendor/Strophe.ts 4:17-38 @ ./src/plugins/MessageDeliveryReceiptsPlugin.ts 22:16-44 @ ./src/bootstrap/plugins.ts 5:38-89 @ ./src/index.ts 3:0-30 1 warning has detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it. webpack 5.65.0 compiled with 1 warning in 18027 ms ℹ ｢wdm｣: Compiled with warnings. No issues found.
最新发布
11-11
你已经成功运行了 `npm run dev`，并且 Webpack Dev Server 已经启动！ 我们来 **详细分析你的输出日志**，并回答核心问题： --- ## ✅ 结论：前端项目正在运行中，可以访问！ ### 🚀 服务已启动 ``` ℹ ｢wds｣: Project is running at http://localhost:8091/ ``` - Webpack 开发服务器已在 **`http://localhost:8091`** 启动 - 资源路径为 `/dist/` - 静态文件根目录是项目根目录（`/www/wwwroot/szrengjing.com/jsxc/jsxc-master`） 👉 只要你能从浏览器访问这台服务器的 `8091` 端口，就可以看到 JSXC 前端界面。 --- ## 🔍 日志逐条解读 ### 1. Git 错误（可忽略） ```bash git: &#39;git&#39; is not a git command. See &#39;git --help&#39;. ``` - 这是因为构建脚本尝试调用 `git rev-parse HEAD` 获取版本信息。 - 当前系统可能没装 `git` 或命令异常。 - ❌ 解决方法： ```bash yum install git -y # CentOS/RHEL # 或 apt-get install git -y # Ubuntu/Debian ``` > ⚠️ 不影响前端运行，仅影响版本号生成。 --- ### 2. Webpack Dev Server 成功启动 ```bash ℹ ｢wds｣: Project is running at http://localhost:8091/ ℹ ｢wds｣: webpack output is served from /dist/ ℹ ｢wds｣: Content not from webpack is served from /www/wwwroot/szrengjing.com/jsxc/jsxc-master ``` - 访问地址：`http://<你的IP>:8091` - 打包后的文件可通过 `/dist/` 路径访问 - 非打包资源（如 `example/`, `assets/`）也会被静态托管 --- ### 3. Sass Deprecation Warnings（警告，不影响运行） ```text Deprecation Warning: Using / for division outside of calc() is deprecated... ``` - 来自 `bootstrap-sass` 包使用了老式 `/` 除法语法 - 新版 Dart Sass 将移除此特性 - ✅ 暂时无需处理，但建议升级或替换 `bootstrap-sass`（已废弃） 🔧 修复建议（长期）： ```bash npm uninstall bootstrap-sass npm install bootstrap@3.4.1 # Bootstrap 3 官方维护分支 ``` --- ### 4. 编译成功，带一个警告 ```bash webpack 5.65.0 compiled with 1 warning in 18027 ms ⚠ ｢wdm｣: Compiled with warnings. ``` #### 关键警告： ```bash Module not found: Error: Can&#39;t resolve &#39;xmldom&#39; in &#39;.../strophe.js/dist&#39; ``` - `strophe.js` 是 JSXC 依赖的 XMPP 库 - 它需要 `xmldom` 在浏览器中解析 XML（Node.js 环境才需要） - 但在前端浏览器环境其实不需要这个模块 ✅ **这是常见假警告，可以安全忽略** 💡 如果你想消除警告，手动安装： ```bash npm install xmldom --save-dev ``` 然后在 `webpack.config.js` 中添加空 mock： ```js // webpack.config.js module.exports = { // ... resolve: { fallback: { "xmldom": false // 或 require.resolve("xmldom") } } }; ``` --- ## 🧪 如何验证前端是否真的可访问？ ### 方法一：本地测试（服务器上） ```bash curl -I http://localhost:8091 ``` 预期响应： ``` HTTP/1.1 200 OK Content-Type: text/html ``` 再查看首页内容： ```bash curl http://localhost:8091 | head -20 ``` 应能看到 `<html>`、`<title>JSXC</title>` 等。 --- ### 方法二：外网访问（推荐配置反向代理） 由于 `webpack-dev-server` 默认只监听 `localhost`，你需要让它支持外网访问。 #### 步骤 1：修改 `webpack.config.js` 找到 `devServer` 配置，改为： ```js devServer: { host: &#39;0.0.0.0&#39;, // 允许外部访问 port: 8091, allowedHosts: &#39;all&#39;, headers: { &#39;Access-Control-Allow-Origin&#39;: &#39;*&#39; }, static: { directory: path.join(__dirname), }, client: { overlay: true, // 浏览器弹出错误提示 }, } ``` #### 步骤 2：重启服务 ```bash npm run dev ``` #### 步骤 3：防火墙放行端口 ```bash firewall-cmd --permanent --add-port=8091/tcp firewall-cmd --reload ``` 或如果你用宝塔面板，在「安全」里开放 `8091` 端口。 #### 步骤 4：浏览器访问 打开浏览器访问： ``` http://你的服务器IP:8091 ``` 你应该看到 JSXC 的登录页面。 --- ## 🛠️ 生产部署建议（上线用） 虽然你现在是在开发模式下运行，但也可以随时构建生产包： ```bash npm run build ``` 然后将 `dist/` 目录交给 Nginx 托管： ```nginx server { listen 80; server_name szrengjing.com; root /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist; index index.html; location / { try_files $uri $uri/ /index.html; } # 如果你要代理 BOSH 请求 location /http-bind { proxy_pass http://your-xmpp-server.com:7070/http-bind; proxy_set_header Host $host; } } ``` --- ## ✅ 总结 | 项目 | 状态 | |------|------| | 是否能运行前端？ | ✅ 是，已运行 | | 开发服务器地址 | `http://localhost:8091` | | 是否可外网访问？ | ❌ 默认不能，需改 `host: 0.0.0.0` + 放行防火墙 | | 是否有严重错误？ | ❌ 无，只有可忽略警告 | | 是否可以部署上线？ | ✅ 可执行 `npm run build` 输出静态文件 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值