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（自1.1.5版开始）中配置的react-scripts，则使用{modules: false}选项（即全局样式）加载className，可以在JSX中将其引用为字符串代码：

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

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

:local .container {...

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

Answer 2

似乎您没有在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

CSS className并未对Reactjs进行任何更改

2 个答案: