找不到模块：无法解析“sass-loader”

作者

找不到模块：无法解析“sass-loader”

Module not found: Can’t resolve ‘sass-loader’

要解决错误“找不到模块：错误：无法解析’sass-loader’”，请确保通过在项目的根目录中打开终端并运行命令
npm install --save-dev sass-loader sass webpack并重新启动开发服务器来安装包。

在项目的根目录（package.json
文件所在的位置）中打开终端并运行以下命令：

壳
# 👇️ with NPM
npm install --save-dev sass-loader sass webpack

# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/sass-loader @types/sass @types/webpack

# ----------------------------------------------

# 👇️ with YARN
yarn add sass-loader sass webpack --dev

# 👇️ ONLY If you use TypeScript
yarn add @types/sass-loader @types/sass @types/webpack --dev

该命令会将
sass-loader包添加到项目的依赖项中。

如有必要，请确保重新启动开发服务器和 IDE。在您停止并重新运行命令之前，您的开发服务器不会接受更改。 npm start

安装的包假定您使用 Dart sass。

现在您可以导入scss文件了。

应用程序.js
import "./style.scss";

导入的文件可能类似于：

样式.scss
$body-color: red;

body {
  color: $body-color;
}

你的 webpack 配置应该类似于：

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

如果您还没有安装
style-loader和
css-loader包，请务必安装。

壳
# 👇️ with NPM
npm install --save-dev style-loader css-loader

# ----------------------------------------------

# 👇️ with YARN
yarn add style-loader css-loader --dev

并重新启动您的开发服务器。

有关自定义配置和选项，请参阅包的
npm页面sass-loader
。

如果错误未解决，请尝试删除您的node_modules和
package-lock.json（不是package.json）文件，重新运行npm install并重新启动您的 IDE。

壳
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install
如果错误仍然存​​在，请确保重新启动 IDE 和开发服务器。VSCode 经常出现故障，有时重启可以解决问题。

如果您仍然收到“找不到模块：错误：无法解析‘sass-loader’”错误，请打开您的package.json文件并确保它包含对象中的sass-loader包devDependencies。

包.json
{
  // ... rest
  "devDependencies": {
    "sass-loader": "^12.6.0",
    "@types/sass-loader": "^8.0.3",
    "sass": "^1.49.11",
    "@types/sass": "^1.43.1",
    "webpack": "^5.71.0",
    "@types/webpack": "^5.28.0",
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }
}

该sass-loader模块不应全局安装或位于您的项目中dependencies，它应该位于您文件中的devDependencies对象中
。package.json

您可以尝试手动添加行并重新运行npm install。

壳
npm install

或者安装最新版本的软件包：

壳
# 👇️ with NPM
npm install --save-dev sass-loader@latest sass@latest webpack@latest

npm install --save-dev style-loader@latest css-loader@latest

# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/sass-loader@latest @types/sass@latest @types/webpack@latest

# ----------------------------------------------

# 👇️ with YARN
yarn add sass-loader@latest sass@latest webpack@latest --dev

yarn add style-loader@latest css-loader@latest --dev

# 👇️ ONLY If you use TypeScript
yarn add @types/sass-loader@latest @types/sass@latest @types/webpack@latest --dev

结论

要解决错误“找不到模块：错误：无法解析’sass-loader’”，请确保通过在项目的根目录中打开终端并运行命令
npm install --save-dev sass-loader sass webpack并重新启动开发服务器来安装包。

–

发表评论