Vue自定义webpack配置项目CSS不生效，vuecli项目中运行正常如何解决？

1. 优先校验webpack loader配置完整性 #

• 确认vue文件处理规则是否正确：
  • 已安装vue-loader和vue-template-compiler依赖
  • 配置中已注册VueLoaderPlugin

  注意：漏加VueLoaderPlugin是此类问题最常见诱因，该插件负责将vue文件拆分出的<style>块交给CSS处理链路解析，漏加不会触发编译报错但样式会完全不生效

• 检查CSS处理loader链是否完整，执行顺序是否正确（loader执行顺序为从右到左/从下到上）：
  普通CSS文件链路：style-loader（或mini-css-extract-plugin的loader） → css-loader → postcss-loader（可选，用于前缀补全、新语法兼容）
  预处理器文件链路（以scss为例）：style-loader → css-loader → postcss-loader → sass-loader
• 确认loader的test正则规则能匹配你使用的样式文件后缀，比如使用scss时规则需包含/\.s[ac]ss$/i，不能只匹配/\.css$/

2. 排查样式作用域与使用方式问题 #

• 检查是否开启了CSS Modules但未按模块规则使用：如果css-loader配置了modules: true，不能直接在模板中写类名字符串，需要用import styles from './xxx.css'后绑定:class="styles.类名"的方式调用
• 确认<style>块的scoped属性配置是否符合预期：全局样式不要加scoped属性，组件内带scoped的样式只会命中当前组件的元素，跨组件选择器不会生效

3. 验证打包产物确认问题范围 #

• 打包后查看dist目录产物：
  • 如果是抽离独立CSS文件的方案，打开CSS文件搜索你的自定义样式代码，确认是否被编译到产物中
  • 如果是样式内联到JS的方案，搜索打包后的JS文件确认样式字符串是否存在
• 产物中无目标样式：回到第一步检查loader配置，大概率是loader规则匹配失败、exclude规则误删了样式文件，导致样式没有被编译进产物
• 产物中有目标样式：打开浏览器控制台元素面板，查看目标元素的样式列表，确认是否是选择器优先级被其他样式覆盖、或者scoped生成的属性选择器和元素上的属性不匹配导致未生效

4. 其他小众问题排查 #

• 检查loader的exclude/include配置是否误排除了你的样式文件所在目录，比如css loader的exclude规则错误写为/src/会跳过所有业务样式
• 确认postcss配置无错误，比如postcss-preset-env等插件的兼容规则错误导致样式被转译失效
• 检查是否开启了样式Tree Shaking，你的样式写法不符合 shaking 规则被误删除

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