我正在使用 React Static Boilerplate 构建一个 React 应用程序。
每个组件都有这样的目录结构：
MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json
在MyComponent.js文件中，我正在做一个原始的import './MyComponent.css'
假设我的 CSS 包含如下内容：
body { background-color: orange; }
.card { background-color: purple; }
我的组件中的渲染函数渲染一张卡片：
render() {
return (
<div className="card">Hello World</div>
);
}
页面的正文将变为橙色，但卡片不会变为紫色。
为什么这个 css 没有完全应用于生成的 HTML？
根据 React Static Boilerplate 网站，他们使用 CSS module - 这可以解释为什么body标签受到尊重，而类选择器却没有。
https://github.com/css-modules/css-modules
尝试像这样导入样式表：
import styles from './MyComponent.css';
在您的组件中使用它，如下所示：
<div className={styles.card}>something!</div>
我遇到了未应用 CSS 的问题，但这不是module，而是应用多个类的语法。下面的语法解决了这个问题
<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>
我发现一个观察结果是印刷错误未被发现，这就是它没有得到应用的原因。看看下面的HTML：
<div style={{display:"inline-block" ,position:"abosolute",right:"70px"}}>
</div>
现在，当我的页面被渲染时，属性display和right正在被应用，但position属性没有被应用。几个小时以来，我一直试图调试它，认为它在某处被覆盖了。
后来，我意识到的拼写absolute有印刷错误。但是浏览器中的 Babel 转译引擎或开发人员工具正在默默地消化错误，这让我很难调试。我不知道为什么在这种情况下转译器或浏览器不会抱怨。
希望这些信息对某人有所帮助！
我知道它没有得到应用的原因。您的 webpack 中必须有某个地方应用了 localIndentName 属性。这会对您的 className 进行散列，因此散列的类名被 style-loader 注入到标签中，但在 DOM 中，您加载了未散列的类。当您使用 css-modules 样式时，此属性仅散列 DOM 类名。
{
test: /\.(sa|sc|c)ss$/,
use: [
argv.mode =='development' ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,//remove this or set to false
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64:5]", //remove this
}
},
'sass-loader'
]
}