Не можете использовать строковые литералы для className в реакции CSS import? - PullRequest
Новая
       81

Не можете использовать строковые литералы для className в реакции CSS import?

1 голос
/ 30 января 2020

Это style.css файл: 

.cake {
  color: red;
}

Это index.js:

Ошибка: 

import React from "react";
import ReactDOM from "react-dom";

import './style.css';

function App() {
  return (
    <div className="cake">Hello!</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

CSS стиль не отображается, а текст в браузере просто черный.

Однако это работает:

Успешно: 

import React from "react";
import ReactDOM from "react-dom";

import styles from './style.css';

function App() {
  return (
    <div className={styles.cake}>Hello!!</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

Это соответствующий раздел webpack.config.js: 

      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          }
        ]
      },

Я хотел бы иметь возможность использовать строковую буквальную версию, и я немного озадачен тем, что многим людям в Интернете кажется, что она доступна , Могу ли я применить изменение конфигурации веб-пакета? Или я что-то здесь упускаю?

1 Ответ

1 голос
/ 30 января 2020

Это сделает волшебные c: 

{
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: false
            }
          }
        ]
      },

На самом деле вы включили css -модули, которые, на мой взгляд, действительно здорово иметь. Подробнее о css -модулях можно прочитать здесь .

...