Question

我正在使用React Static Boilerplate建立一个反应应用程序。

每个组件都有一个这样的目录结构：

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？

Answer 1

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

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

尝试像这样导入样式表：

import styles from './MyComponent.css';

在组件中使用它如下：

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

Answer 2

我遇到了CSS未应用的问题，但它不是模块，它最终成为应用多个类的语法。下面的语法解决了问题

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

Answer 3

我偶然发现印刷错误没有被发现，这就是为什么它没有得到应用的原因。看看下面的HTML：

$route['(:any)/post/(:any)/(:any)/(:any)'] ='post/details/$3/$4';

现在，当渲染页面时，属性<div style={{display:"inline-block" ,position:"abosolute",right:"70px"}}> </div>和display被应用，而right属性未被应用。我花了好几个小时尝试调试它，以为它在某个地方被覆盖了。

后来，我意识到position的拼写有印刷错误。但是浏览器中的Babel编译引擎或开发人员工具无声地吞噬了该错误，使我难以调试。我不为什么在这种情况下翻译程序或浏览器不会抱怨。

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

Answer 4

我知道它未得到应用的原因。应用了localIndentName属性的Webpack中必须有某个位置。这会对您的className进行哈希处理，因此样式加载器会将哈希后的类名注入到标签中，但是在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'
                ]
            }

一些加载到React应用程序的CSS未应用

4 个答案: