不能在 react CSS 导入中对 className 使用字符串文字？

Question

这是 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
            }
          }
        ]
      },

我想要使用字符串文字版本的选项，我有点困惑，网上很多人似乎都可以使用它。我可以应用一些 webpack 配置更改吗？还是我在这里遗漏了其他东西？

Answer 1

这会很神奇：

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

实际上您已经启用了 css 模块，在我看来，拥有这些模块真的很棒。您可以阅读更多关于 css-模块 here.

不能在 react CSS 导入中对 className 使用字符串文字？

Cannot use string literals for className in react CSS imports?

css

classname

styling

reactjs

webpack