为什么 webpack 找不到 scss 文件答案

【问题标题】：Why webpack can't find scss file为什么 webpack 找不到 scss 文件
【发布时间】：2021-01-05 03:44:09
【问题描述】：

将 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 位置。

【问题讨论】：

我认为这里没有足够的细节来帮助您。对于初学者，您能否包含完整的错误消息？这可能会极大地帮助我们找出问题所在。
我很抱歉这是我的错误我应该正确阅读错误，结果我使用的是背景图像而没有提供其 src 位置。

标签： javascript webpack sass

【解决方案1】：

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

【讨论】：

我很抱歉这是我的错误我应该正确阅读错误，结果我使用的是背景图像而没有提供其 src 位置。
../sass/main.scss 是正确的