Webpack v4中sass-loader加载失败问题求助

看起来你遇到的问题大概率是几个配置冲突或者使用方式不当导致的，我来帮你逐一排查并给出解决方案：

1. style-loader与MiniCssExtractPlugin冲突（最可能的原因） #

你同时配置了style-loader和MiniCssExtractPlugin，这两个工具的作用是互斥的：

• style-loader是把编译后的CSS注入到页面的<style>标签中
• MiniCssExtractPlugin是把CSS提取成独立的文件输出

两者同时使用会导致构建逻辑混乱，直接引发编译错误。

解决方案：
根据你的需求二选一：

• 如果是开发环境（需要热更新、快速调试）：移除MiniCssExtractPlugin插件，保留style-loader
• 如果是生产环境（需要提取独立CSS文件）：把style-loader替换成MiniCssExtractPlugin.loader，配置修改为：

module: {
  rules: [
    // 其他loader配置...
    {
      test: /\.(css|scss)$/,
      use: [
        MiniCssExtractPlugin.loader, // 替换原有的style-loader
        { loader: 'css-loader', options: { modules: true } },
        { loader: 'sass-loader' }
      ]
    }
  ]
},
plugins: [
  new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }),
  new CleanWebpackPlugin(),
]

2. CSS Modules使用方式错误 #

你在css-loader中开启了modules: true，这意味着所有SCSS文件会被当作CSS Modules处理，类名会被哈希化，不能直接用字符串"app-bar"作为className。

解决方案：
在组件中通过导入的样式对象来访问类名：

import * as React from 'react';
import styles from './styles.scss'; // 导入样式对象

const Navigation = () => {
  // 使用驼峰式访问或者方括号访问原类名
  return (<div className={styles.appBar}></div>)
  // 或者：return (<div className={styles['app-bar']}></div>)
}

如果不需要CSS Modules，直接把css-loader的modules: true改为modules: false即可，这样就能继续用字符串className。

3. 依赖版本不兼容（Webpack 4对版本要求严格） #

Webpack 4和较新的sass-loader、node-sass版本不兼容，过高的版本会导致编译失败。

解决方案：
安装Webpack 4兼容的指定版本依赖：

npm install sass-loader@8 node-sass@4 css-loader@4 style-loader@1 mini-css-extract-plugin@0.11 --save-dev

（这些版本经过验证可以稳定运行在Webpack 4环境中）

4. Laravel Mix的配置干扰 #

你提到用Laravel Mix运行Webpack，Laravel Mix本身封装了Webpack配置，手动修改webpack.config.js可能会和Mix的默认配置冲突。

解决方案：
改用Laravel Mix的API来配置SCSS和TypeScript，在webpack.mix.js中修改：

const mix = require('laravel-mix');

// 配置TypeScript和SCSS
mix.ts('resources/js/index.tsx', 'public/js')
   .sass('resources/js/styles.scss', 'public/css')
   // 如果需要启用CSS Modules
   .options({
     cssModule: {
       localIdentName: '[path][name]__[local]--[hash:base64:5]',
     },
   })
   // 扩展Webpack配置（如果需要）
   .webpackConfig({
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.jsx'],
     },
   });

这样Mix会自动帮你处理loader的依赖和配置，避免手动配置的冲突。

最后，记得重新安装依赖并清理缓存：

rm -rf node_modules package-lock.json
npm install
npm run build

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