CSS className не вносит никаких изменений в Reactjs

Question

Я сейчас работаю с rails и реагировать.У меня проблемы с использованием 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;
}  

Для записи я использую веб-пакет.Может кто-нибудь помочь мне понять, почему 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, как настроено в react-scripts (по состоянию на 1.1.5), то classNames загружаются с использованием опции {modules: false}, то есть глобальных стилей, на которые можно ссылаться как строки в коде JSX:

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

Или вы можете загрузить локальные стили, используя следующий синтаксис CSS-файла:

:local .container {...

Или соответствующим образом отредактируйте webpack.config.js (официальную документацию по различным параметрам см. В https://github.com/webpack-contrib/css-loader#scope).

Answer 2

похоже, что вы не включили опцию { modules: true } для css-загрузчика в конфигурации webpack

посмотрите

webpack-contrib / sass-loader # 206

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

Взято из: https://github.com/facebook/create-react-app/issues/1350