F:\software\java\SS\admin>npm run serve > [email protected] serve F:\software\java\SS\admin > vue-cli-service serve INFO Starting development server... 11% building 9/16 modules 7 active ...utils\sendMessage.jsBrowserslist: caniuse-lite is outdated. Please run the following command: `npm update` 40% building 39/49 modules 10 active ...nycode\punycode.jsDeprecation 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 40% building 114/161 modules 47 active ...pi\dist\index.jsDeprecation 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 [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

### 解决方案 在 Vue CLI 项目中运行 `npm run serve` 遇到的 Sass `@import` 和 Legacy JS API 弃用警告问题，通常是由以下几个原因引起的： #### 1. **Vue CLI Service未正确安装** 如果提示 `'vue-cli-service' 不是内部或外部命令...`，这表明全局环境中缺少 `@vue/cli-service` 或者本地依赖未正确安装。可以通过重新安装依赖来解决问题[^1]。 ```bash rm -rf node_modules package-lock.json npm install ``` #### 2. **Legacy JS API 报错** Dart Sass 已经宣布弃用旧版 JavaScript API，并将在未来的版本中移除它。当前使用的 `node-sass` 是基于 LibSass 的实现，而 LibSass 正逐渐被淘汰。因此建议切换至 Dart Sass 实现的 `dart-sass` 或 `sass` 包[^3]。 ##### 替换 `node-sass` 为 `sass` 执行以下命令卸载 `node-sass` 并安装新的 `sass` 包： ```bash npm uninstall node-sass --save-dev npm install sass --save-dev ``` 此操作会将项目的 Sass 编译器替换为更现代化的 Dart Sass 版本，从而消除关于 Legacy JS API 的弃用警告[^4]。 #### 3. **临时禁用弃用警告** 如果你暂时无法迁移至新 API，可以配置 `silenceDeprecations` 参数以隐藏这些警告消息。通过修改 Webpack 配置文件（通常是 `vue.config.js`），添加如下设置： ```javascript module.exports = { css: { loaderOptions: { sass: { implementation: require('sass'), sassOptions: { silenceDeprecationWarnings: ['legacy-js-api'] } } } } }; ``` 注意：这种方法仅适用于短期解决方案；长期来看仍需完成向现代 API 的过渡。 #### 4. **检查 SASS 导入路径** 对于 `@import` 使用中的潜在错误，请确认所有样式文件均采用正确的相对/绝对路径引用方式。推荐逐步升级至 CSS Modules 或 PostCSS 插件作为替代手段减少对传统导入语法的依赖。 --- ### 示例代码调整后的 Webpack 配置 (vue.config.js) ```javascript const { defineConfig } = require('@vue/cli-service'); const dartSass = require('sass'); module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { sass: { implementation: dartSass, // Use dart-sass instead of node-sass sassOptions: { includePaths: ['./src/styles'], // Add custom paths here if necessary silenceDeprecationWarnings: ['legacy-js-api'] // Suppress warnings temporarily }, }, }, }, }); ``` --- ### 总结 综上所述，要彻底解决该类问题需要更新构建工具链并适配最新的编译环境。具体措施包括但不限于更换 Sass 处理库以及优化资源加载逻辑等环节。