3eaea3116d
1. 新增生产配置-工厂模型-工厂区域完整CRUD页面 2. 新增通用表格、弹窗表单、i18n工具组件 3. 升级sass-loader并修复Sass废弃警告 4. 添加文档记录Sass迁移修复细节
147 lines
5.3 KiB
Markdown
147 lines
5.3 KiB
Markdown
# Sass 废弃警告修复记录
|
||
|
||
> 项目运行 `pnpm serve` 时，Dart Sass 输出了多类废弃 API 警告。本文档记录问题现象、根因及修复方案。
|
||
|
||
---
|
||
|
||
## 1. `legacy-js-api` — Sass Loader 旧 JS API 警告
|
||
|
||
### 问题现象
|
||
|
||
```
|
||
Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
|
||
```
|
||
|
||
### 根因
|
||
|
||
`sass-loader` 旧版本默认通过旧版 JS API 调用 Dart Sass。Dart Sass 计划在 2.0 中移除该 API。
|
||
|
||
### 修复
|
||
|
||
**文件：`package.json`**
|
||
|
||
将 `sass-loader` 升级到 `10.5.2`（v10 最后一个稳定版，兼容 Webpack 4），该版本支持 `silenceDeprecations` 选项。
|
||
|
||
```diff
|
||
- "sass-loader": "^10.3.1",
|
||
+ "sass-loader": "~10.5.2",
|
||
```
|
||
|
||
**文件：`vue.config.js`**
|
||
|
||
在 `css.loaderOptions.sass` 中添加 `silenceDeprecations` 配置。
|
||
|
||
```js
|
||
sass: {
|
||
additionalData: '@use "@/assets/style/public.scss" as *;',
|
||
sassOptions: {
|
||
silenceDeprecations: ['legacy-js-api', 'import']
|
||
}
|
||
},
|
||
```
|
||
|
||
---
|
||
|
||
## 2. `import` — Sass `@import` 废弃警告
|
||
|
||
### 问题现象
|
||
|
||
```
|
||
DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
|
||
|
||
╷
|
||
1 │ @import '~@/assets/style/unit/color.scss';
|
||
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||
╵
|
||
src\assets\style\public.scss 1:9 @use
|
||
```
|
||
|
||
### 根因
|
||
|
||
`public.scss` 通过 `@import '~@/assets/style/unit/color.scss'` 引入颜色变量文件。Dart Sass 正在推动从 `@import` 迁移到 `@use` / `@forward` 模块系统。
|
||
|
||
### 为何不改成 `@use`
|
||
|
||
该 `@import` 使用了 Webpack 专有的 `~` 前缀做模块路径解析（`~@/assets/...`），`@use` 对此机制支持不稳定，直接替换可能导致构建失败。
|
||
|
||
### 修复
|
||
|
||
在上述 `silenceDeprecations` 数组中追加 `'import'`，静默该警告。
|
||
|
||
---
|
||
|
||
## 3. `global-builtin` — 全局内置函数 `nth()` 废弃警告
|
||
|
||
### 问题现象
|
||
|
||
```
|
||
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
|
||
Use list.nth instead.
|
||
|
||
╷
|
||
42 │ .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
|
||
│ ^^^^^^^^^^^^^^^^^^^
|
||
╵
|
||
src\assets\style\public-class.scss 42:19 @import
|
||
src\App.vue 3:9 root stylesheet
|
||
```
|
||
|
||
### 根因
|
||
|
||
Dart Sass 正在将全局内置函数迁移到命名空间模块。`nth()` 属于 `sass:list` 模块，不应再作为全局函数直接调用。
|
||
|
||
### 修复（从源码根治）
|
||
|
||
**文件：`src/assets/style/public-class.scss`**
|
||
|
||
**步骤 1** — 文件顶部引入 `sass:list` 模块：
|
||
|
||
```diff
|
||
+ @use 'sass:list';
|
||
@import 'public';
|
||
```
|
||
|
||
**步骤 2** — 将 `@for` 循环中所有 `nth()` 替换为 `list.nth()`：
|
||
|
||
```diff
|
||
@for $index from 1 to 6 {
|
||
- .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
|
||
- .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-m-#{list.nth($sizes, $index)} { margin: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-mt-#{list.nth($sizes, $index)} { margin-top: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-mr-#{list.nth($sizes, $index)} { margin-right: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-mb-#{list.nth($sizes, $index)} { margin-bottom: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-ml-#{list.nth($sizes, $index)} { margin-left: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-p-#{list.nth($sizes, $index)} { padding: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-pt-#{list.nth($sizes, $index)} { padding-top: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-pr-#{list.nth($sizes, $index)} { padding-right: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-pb-#{list.nth($sizes, $index)} { padding-bottom: #{list.nth($sizes, $index)}px !important; }
|
||
+ .#{$prefix}-pl-#{list.nth($sizes, $index)} { padding-left: #{list.nth($sizes, $index)}px !important; }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 涉及文件汇总
|
||
|
||
| 文件 | 修改内容 |
|
||
|------|---------|
|
||
| `package.json` | `sass-loader` 版本 `^10.3.1` → `~10.5.2` |
|
||
| `vue.config.js` | 添加 `sassOptions.silenceDeprecations` 配置 |
|
||
| `src/assets/style/public-class.scss` | 引入 `sass:list` 模块，`nth()` → `list.nth()` |
|
||
|
||
---
|
||
|
||
## 后续建议
|
||
|
||
- 当项目未来升级到 Vue CLI 5 / Webpack 5 时，可考虑将 `public.scss` 中的 `@import` 改为 `@use`（届时 `~` 前缀路径的兼容方案需要重新评估）。
|
||
- `silenceDeprecations` 中的 `'import'` 为临时静默方案，待 `@import` 改造完成后移除。
|