WARN A new version of sass-loader is available. Please upgrade for best experience. - Building for production...Deprecation Warning [legacy-js-api]: 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 [import]: 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 ╷ 9 │ @import "~element-ui/packages/theme-chalk/src/index"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ stdin 9:9 root stylesheet Deprecation Warning [legacy-js-api]: 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 | Building for production...Deprecation Warning [legacy-js-api]: 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

### Sass 和 sass-loader 的弃用警告解决方案 当使用 `sass` 或 `node-sass` 以及 `sass-loader` 进行开发时，可能会遇到关于 **legacy-js-api** 的弃用警告。这是由于现代版本的 `dart-sass` 已经不再支持旧版 JavaScript API 调用方式所致[^1]。 #### 解决 Legacy-Js-Api 弃用警告 为了消除此警告并升级到最新版本的 `sass-loader`，可以采取以下措施： 1. 将项目中的 `node-sass` 替换为 `dart-sass`。这是因为 `node-sass` 使用的是 C++ 扩展实现，而 `dart-sass` 是纯 JavaScript 实现，能够更好地兼容最新的 `sass-loader` 版本。 安装命令如下： ```bash npm uninstall node-sass npm install dart-sass --save-dev ``` 2. 更新 `sass-loader` 到最新稳定版本（通常建议至少更新至 v10 及以上）。这一步可以通过以下命令完成： ```bash npm install sass-loader@latest webpack@latest fibers@latest --save-dev ``` 3. 修改 Webpack 配置文件以适配新的加载器设置。以下是配置的一个典型例子： ```javascript const path = require('path'); module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: require('dart-sass'), fiber: require('fibers'), // 提升构建性能可选 }, }, ], }, ], }, }; ``` #### @import 规则的替代方案 随着 CSS Modules 和其他模块化工具的发展，Sass 社区推荐逐步淘汰传统的 `@import` 方法转而采用更现代化的方式管理样式依赖关系。具体方法包括但不限于以下几个方面： 1. **CSS Module**: 如果框架允许的话，可以直接切换到基于 CSS 模块的工作流来代替全局范围内的导入操作。这样不仅可以减少不必要的重复计算还能增强组件间样式的隔离性[^2]。 2. **Composes 关键字**: 在某些场景下可以用 `composes` 来组合不同类名从而达到复用目的而不是通过嵌套或者多重引入达成目标效果。 3. **按需加载**: 对于大型应用来说可能更适合考虑按照页面需求动态加载所需的 SCSS 文件而非一次性全部打包进来造成资源浪费的情况发生；此时就需要重新设计项目的结构布局以便更容易实现这一功能特性。 4. **PostCSS 插件**: 结合 PostCSS 插件如 autoprefixer 等也可以帮助简化部分跨浏览器兼容性的处理工作量进而降低对传统 SASS 功能过度依赖的程度。 综上所述，在面对此类问题时应该优先评估当前技术栈是否有必要继续沿用原有的做法还是寻找更加高效合理的途径加以改进优化才是长久之计。 ```javascript // Example of using composes instead of @import .button { color: blue; } .primary-button { composes: button; /* Reuse styles from .button */ } ```