加载到 React 应用程序中的某些 CSS 未应用答案

【问题标题】：Some CSS loaded into React app are not applied加载到 React 应用程序中的某些 CSS 未应用
【发布时间】：2021-01-06 17:02:26
【问题描述】：

我正在使用 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？

【问题讨论】：

也许将!important 添加到.card 规则中？
我试过了，根本看不到.card 的css。
嗯。你有没有正确安装 style-loader 和 css-loader 并应用到 webpack？我会这样认为，因为应用了其他 CSS 规则，但请检查以确保。另请查看开发者工具。

标签： reactjs webpack

【解决方案1】：

根据 React Static Boilerplate 网站，他们使用 CSS 模块 - 这可以解释为什么 body 标记受到尊重但类选择器不被尊重。

https://github.com/css-modules/css-modules

尝试像这样导入样式表：

import styles from './MyComponent.css';

像这样在你的组件中使用它：

<div className={styles.card}>something!</div>

【讨论】：

我刚试过这个，它不起作用。也许它在过去发生过？或者还有比这个答案中的更多内容需要做的事情吗？
这取决于问题所在 - 您是否看到错误？或者只是样式不适用？
我认为问题在于css文件需要命名为foo.module.css，其中module是导入它的模块的名称。至少这是为我修复它的原因（或者我可能无意中更改了导致它失败的其他内容，但我相信 React 网站建议使用 ....module.... 命名方案）。
foo.module.css 为我解决了！

【解决方案2】：

我遇到了未应用 CSS 的问题，但不是模块，而是应用多个类的语法。下面的语法解决了这个问题

<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>

【讨论】：

【解决方案3】：

我发现印刷错误未被检测到，这就是它没有被应用的原因。看看下面的 HTML：

<div style={{display:"inline-block" ,position:"abosolute",right:"70px"}}>
</div>

现在，当我的页面被渲染时，display 和 right 属性被应用，但 position 属性没有被应用。几个小时以来，我一直在尝试调试它，以为它在某个地方被覆盖了。

后来，我意识到absolute 的拼写有印刷错误。但是浏览器中的 Babel 转译引擎或开发工具正在默默地吃掉错误，使我难以调试。我不知道为什么转译器或浏览器在这种情况下不抱怨。

希望这些信息对某人有所帮助！

【讨论】：

【解决方案4】：

我知道它没有被应用的原因。你的 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'
                ]
            }

【讨论】：