已配置正确Webpack仍出现模块解析错误？WordPress站点从Laravel Mix迁移后的问题排查

嘿，我看了你遇到的问题——从Laravel Mix切换到纯Webpack后，老站点一直报SCSS解析错误，但测试站却正常运行，这确实让人头疼！我之前也处理过类似的迁移场景，给你几个针对性的解决方案：

1. 先修正Webpack Loader的执行顺序 #

这大概率是核心问题！Webpack的loader是从右到左执行的，你当前的loader顺序写反了，导致sass-loader和postcss-loader根本没机会先处理SCSS文件。正确的顺序应该是：

• 先让sass-loader把SCSS编译成原生CSS
• 再用postcss-loader处理CSS的兼容前缀等
• 接着用css-loader解析CSS里的@import和url()
• 最后用MiniCssExtractPlugin.loader把CSS提取成单独文件

把你的webpack.mix.js里的rules部分改成这样：

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        { loader: MiniCssExtractPlugin.loader, options: { publicPath: "" } },
        "css-loader",
        "postcss-loader", // 移到sass-loader前面
        "sass-loader"     // 放在最后，最先执行
      ]
    },
  ],
},

2. 清理老站点的残留缓存 #

因为你的站点之前用Laravel Mix，很可能残留了旧的缓存文件干扰Webpack运行，试试这些步骤：

• 删除项目根目录的node_modules文件夹
• 删除package-lock.json（或yarn.lock）文件
• 手动删掉你的输出目录（比如dist），或者在Webpack命令里加--no-cache参数跳过缓存
• 重新跑npm install安装依赖

3. 检查入口文件的导入细节 #

确认src/index.js里导入SCSS文件的写法是否正确，比如要带上.scss后缀：

// 正确示例
import './styles/main.scss';

如果没写后缀，Webpack可能会错误地用JS loader去处理这个文件，自然解析不了@import里的@符号。

4. 补个PostCSS配置文件 #

你虽然装了postcss-preset-env，但如果没有postcss.config.js，PostCSS可能没法正常工作。在项目根目录新建这个文件：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'last 2 versions'
    })
  ]
};

我之前帮朋友处理过几乎一模一样的问题，调整loader顺序+清理缓存就解决了，你可以先试试这两步，应该能搞定！

内容的提问来源于stack exchange，提问作者Steve