為什么 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'