Vue/Webpack开发环境无法将CSS注入HTML的问题咨询

我之前也踩过一模一样的坑！结合你说的生产环境正常、核心差异是extractCSS: true和CSS提取插件的情况，咱们来一步步解决开发环境的CSS注入问题：

• 先把开发环境的extractCSS选项关掉
  生产环境设置extractCSS: true是为了把CSS提取到单独文件优化加载，但开发环境咱们需要的是把CSS实时注入到页面的<style>标签里。所以你得确保开发环境的vue-loader配置里没有设置extractCSS: true，让它保持默认的false状态——这个是最可能的原因！

• 确认vue-style-loader已正确配置
  vue-loader在开发环境默认依赖vue-style-loader来完成CSS注入，先检查你有没有安装它：

  npm install vue-style-loader --save-dev
  

  然后看webpack配置里的vue-loader规则，开发环境下不要替换掉这个loader，比如正确的配置片段应该是这样的：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            // 开发环境不要加extractCSS
            postcss: {
              // 你的PostCSS插件配置，比如autoprefixer、tailwindcss等
              plugins: [require('autoprefixer')]
            }
          }
        }
      ]
    }
  }
  

• 排查webpack-dev-server的配置问题
  确保devServer没有禁用inline模式，也不要设置错误的contentBase导致资源路径异常。如果开启了热重载（hot），要确认它和vue-loader的热更新逻辑兼容——一般默认配置就没问题，但如果自定义了热重载插件，可能需要调整。

• 临时排除PostCSS的影响
  虽然生产环境PostCSS正常，但可以先临时注释掉PostCSS的配置，测试CSS能不能正常注入。如果注释后恢复正常，那大概率是某个PostCSS插件在开发环境下的输出格式影响了vue-style-loader的注入，你可以逐个排查插件找到问题所在。

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