为什么React中导入的CSS样式不生效？配置css-loader后仍无效果

你的webpack配置仅引入了css-loader，该loader仅能处理CSS文件的导入解析，无法将解析后的样式注入到页面DOM中，所以样式不会实际生效。

解决步骤 #

1. 补全webpack CSS处理loader #

首先安装style-loader，该工具负责将css-loader处理后的样式注入到页面的<style>标签中：

npm install style-loader --save-dev

修改webpack配置中的CSS处理规则，注意loader执行顺序是从右到左，必须把style-loader放在css-loader前面：

module: {
  rules: [
      // use ts-loader for ts and js files so all files are converted to es5
      { test: /\.(tsx?|js)$/, exclude: /node_modules/, loader: 'ts-loader' },
      { test: /\.js$/, loader: 'source-map-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader']},
  ],
},

修改配置后重启webpack服务即可生效。

2. 其他可能问题排查 #

如果修改loader后依然不生效，可依次检查以下问题：

• 检查React组件内的样式属性是否写为className而非HTML原生的class，React不识别class属性，会导致样式无法匹配
• 如果配置了CSS Modules（即给css-loader加了modules: true配置），不能直接用字符串类名，需要用导入对象的方式调用：

  import styles from "./styles.css"
  // 组件内写法
  <div className={styles.你的类名}></div>
  

• 检查样式引入路径是否正确，导入路径是相对于当前组件文件的相对路径，若组件存放在src子目录中，需要调整对应路径层级
• 打开浏览器开发者工具的Elements面板，查看head标签内是否存在你写的CSS代码，如果存在但样式不生效，说明是类名匹配错误或者样式优先级被覆盖

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