当我有正确的 webpack 配置时如何解决模块解析问题？答案

【问题标题】：How to fix module parse issue when I have the correct webpack configuration?当我有正确的 webpack 配置时如何解决模块解析问题？
【发布时间】：2021-11-13 06:01:58
【问题描述】：

我在本地开发环境中有一个 WP 站点。我通常使用 laravel-mix 来转换和缩小我拥有的各种 JS 和 SCSS 文件，但我想摆脱它，因为它不是 laravel。

我在一个新的 WP 网站上测试了我的所有配置，一切似乎都可以正确构建，甚至 SCSS 文件也被转换为 CSS 并被缩小。

我卸载了 laravel-mix 并安装了运行正确的非 laravel-mix 配置所需的所有包。

这是我的 package.json 中的包的 jist

"dependencies": {
    "@popperjs/core": "^2.10.1",
    "bootstrap": "^5.1.1",
    "bootstrap-icons": "^1.5.0"
  },
"devDependencies": {
  "css-loader": "^6.2.0",
  "mini-css-extract-plugin": "^2.3.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.6",
  "postcss-loader": "^6.1.1",
  "postcss-preset-env": "^6.7.0",
  "sass": "^1.41.1",
  "sass-loader": "^12.1.0",
  "webpack": "^5.53.0",
  "webpack-cli": "^4.8.0"
},

还有我的 webpack.mix.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "production",
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].min.css'
        })],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: { publicPath: "" }
                    },
                    "css-loader",
                    "sass-loader",
                    "postcss-loader"
                ]
            },
        ],
    },
    output: {
        filename: '[name].min.js'
    },
    devtool: 'source-map',
}

我在构建它时一直遇到问题，因为它给了我一个错误：

Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // @import 'node_modules/bootstrap/scss/bootstrap';
|
> @import 'scss/colors';
| @import 'scss/header';
| @import 'scss/front-page';
 @ ./src/index.js 3:0-22

正如上面所说，这与我的其他测试站点是一对一的，并且运行顺利。唯一不同的是，这个站点使用的是 laravel-mix，而另一个站点只有 webpack。

我已尝试重新安装每个软件包；将每个包都设置为依赖项而不是 devdependecies，并且搞乱了 webpack.mix.js 本身无济于事。

已经几天了，我找不到任何解决方案。任何建议表示赞赏。

【问题讨论】：

标签： wordpress webpack sass-loader

【解决方案1】：

文件应该被调用

webpack.config.js

而不是

webpack.mix.js

我非常业余，但我会回答这个问题，以便如果有人遇到类似问题，他们可以看到我的解决方案。

【讨论】：