uni-app Node Sass version 8.0.0 is incompatible with ^4.0.0

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app Node Sass version 8.0.0 is incompatible with ^4.0.0

开发环境 版本号 项目创建方式
Windows 21H2 CLI

操作步骤:

新工程,直接添加node-sass依赖报错。

预期结果:

修复支持9.0.0 node-sass

实际结果:

报错

bug描述:

index.js:138 Uncaught Error: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.

my-project.zip


4 回复

在处理uni-app项目中遇到的Node Sass版本不兼容问题时,通常涉及到对node-sass或它的替代者sass(基于Dart Sass的Node.js封装)的版本管理。由于node-sass是依赖于LibSass的,而LibSass已被废弃,因此推荐使用sass替代node-sass

以下是一个解决方案的示例,展示如何在一个uni-app项目中从node-sass迁移到sass,并解决版本不兼容的问题。

步骤 1: 移除node-sass

首先,从项目中移除node-sass。你可以通过运行以下命令来完成这一步骤:

npm uninstall node-sass

或者,如果你使用的是yarn:

yarn remove node-sass

步骤 2: 安装sass

接下来,安装sass。这个包是Dart Sass的官方Node.js封装,并且与大多数现代构建工具兼容:

npm install sass

或者,如果你使用的是yarn:

yarn add sass

步骤 3: 更新配置文件(如果有)

在某些情况下,你可能需要在webpack配置或其他构建脚本中更新对Sass编译器的引用。例如,如果你在使用Vue CLI或类似的工具,通常不需要手动修改配置,因为这些工具会自动识别并使用sass

然而,如果你在uni-app中有自定义的webpack配置,确保Sass loader配置正确,如下所示:

// webpack.config.js 示例片段
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // Sass options here
              implementation: require('sass') // 确保使用sass而不是node-sass
            }
          }
        ]
      }
    ]
  }
};

步骤 4: 验证安装

最后,运行你的uni-app项目,确保一切正常工作。你可以通过以下命令启动开发服务器:

npm run dev

或者,如果你使用的是yarn:

yarn dev

注意检查控制台输出,确保没有关于Sass的错误。

通过上述步骤,你应该能够解决uni-app项目中node-sass版本不兼容的问题,并迁移到更现代的sass。如果遇到特定错误,请检查官方文档或社区提供的解决方案。

回到顶部