为什么 webpack 找不到 scss 文件

Question

将 scss 文件导入 index.js 时出现模块未找到错误。

这是我的项目目录：

这是我的 index.js（它在 js 文件夹中）：

import '../sass/main.scss'

这是我的 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
      rules: [
          {
            test: /\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader'],
          }
      ]
  }
};

package.json：

"devDependencies": {
    "css-loader": "^5.0.1",
    "sass": "^1.32.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }

当我将文件移动到根文件夹（src）时，它工作正常。 但是当移回文件夹结构时，它说找不到模块。

请任何帮助将不胜感激。

编辑：

对不起，这是我的错误，我应该正确阅读错误，事实证明我使用的是背景图像而没有提供其 src 位置。

Answer 1

尝试从根文件夹设置路径： import './src/sass/main.scss'而不是import '../sass/main.scss'