Webpack 4中mini-css-extract-plugin未输出转换后Sass文件求助

Hey there! Sorry to hear you're hitting this snag with Sass files not being output by mini-css-extract-plugin while plain CSS works fine. Let's walk through some common fixes and checks that usually resolve this kind of issue:

• Double-check your loader order and configuration
  Webpack loaders run from right to left, so your Sass rule must follow the correct sequence—mixing this up is one of the most common reasons Sass extraction fails:

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader, // Extracts compiled CSS into files
          'css-loader', // Resolves @import/url() in CSS
          'sass-loader' // Compiles Sass to vanilla CSS
        ]
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
  

• Verify your plugin's output path setup
  Check the filename option in your MiniCssExtractPlugin instance. If you're using a dynamic path like css/[name].css, ensure your entry points map correctly to this structure. Also, make sure there's no conflicting rule elsewhere in your config that's overriding how Sass files are processed.

• Rule out plugin conflicts
  You mentioned extract-text-plugin—important note: this plugin is officially deprecated and should never be used alongside mini-css-extract-plugin. Even leftover commented-out references can cause unexpected behavior, so strip it entirely from your config to avoid conflicts.

• Check split chunks settings
  If you're using Webpack's optimization.splitChunks, make sure it's not excluding Sass-derived CSS chunks. Explicitly define a cache group for styles to ensure they get extracted properly:

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(css|s[ac]ss)$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
  

If none of these steps fix the issue, sharing a snippet of your full Webpack config (especially the module rules and plugin sections) from your sample project would help narrow things down even further.

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