CSS className 没有对 Reactjs 进行任何更改

Question

我目前正在使用 rails 和 reactjs。我在我的 reactjs 文件中使用 css 时遇到了困难。似乎每次我尝试使用它时，都没有应用任何更改。在我的 App.jsx 文件中，我有这个：

import React from "react";
import styles from "./styles.css";

export default class Register extends React.Component {

  render() {
    return (
      <div className={styles.container}>
        <h1> this text should appear to the right </h1>
      </div>
   );
  }
}

在我的 styles.css 文件中我有这个：

.container {
    width:40%;
    text-align:right;
}  

为了记录，我正在使用 webpack。谁能帮我理解为什么 css 对我的 jsx 组件没有任何影响。我到处寻找帮助，但无法将这些碎片拼凑在一起。

如果重要的话，这就是我的“config/webpack/development.js”文件的样子：

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Answer 1

似乎您没有在 webpack 配置中为 css-loader 启用选项 { modules: true }

看看

webpack-contrib/sass-loader#206

https://github.com/webpack-contrib/css-loader#options

取自：https://github.com/facebook/create-react-app/issues/1350

Answer 2

这取决于 webpack 加载器设置。如果您使用 react-scripts 中配置的 css-loader（截至 1.1.5），则使用 {modules: false} 选项加载类名，即全局样式，可以在 JSX 代码中作为字符串引用：

import "./styles.css";
... className="container" ...

或者您可以使用以下 CSS 文件语法加载本地样式：

:local .container {...

或适当地编辑您的webpack.config.js（有关各种选项的官方文档，请参阅https://github.com/webpack-contrib/css-loader#scope）。