ReactJS 中的 jsx 不使用 Css答案

【问题标题】：Css is not used by jsx in ReactJSReactJS 中的 jsx 不使用 Css
【发布时间】：2019-06-19 19:11:57
【问题描述】：

我将 ReactJS 与 Webpack 和 TypeScript 一起使用。我正在尝试将 CSS 包含在 React 中。但是我的 CSS 没有被我的 React 应用程序使用。我创建了一个 global.d.ts 文件来声明我的 css 模块。我将我的 css 导入到 my.tsx 文件中，但是当我将一个类添加到一个元素时，没有任何效果。

我已经尝试安装一个 css 模块但我没有成功。所以，我只是提出了创建 global.d.ts 文件的解决方案

global.d.ts：

declare module '*.css';

你好.tsx

import * as css from './Hello.css';

export interface HelloProps {
  compiler: string;
  framework: string;
}

export class Hello extends React.Component<HelloProps, {}> {

  render() {
    return (
      <form>
        <p className={css.test}> Test </p>
      </form>
    );
  }
}

Hello.css


.test {
   color: red;
}

webpack.config.js

module: {
   rules: [

     .....

     { test: /\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] }
   ]
 },

“测试”这个词是用黑色写的。什么时候应该是红色的

【问题讨论】：

标签： css reactjs typescript

【解决方案1】：

这可能是因为您没有在 css-loader 选项中将模块设置为 true。

// webpack.config.js

rules: [
  {
    test: /.css$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
],

另外，我只需执行以下操作，因为不需要 * 导入。

import css from './Hello.css'

然后在你的 jsx 中：

<Component className={css.test} />

【讨论】：

最好的解决方案是什么？保罗的解决方案有效。但这是正确的做法吗？
@Karti 如果您想将 css 模块与 webpack 一起使用，并且不让您的 css 类泄漏到其他组件，那么我的方法就是要走的路。否则直接导入 css 文件会将 css 类暴露给整个应用程序，您可以在任何地方使用.test。在这种情况下，最好在应用初始化级别导入样式表。
是的。确实更干净。但是使用您的解决方案，我的 Chrome 日志中有此错误：未捕获的类型错误：无法读取未定义的属性“测试”。我添加了以下内容：<p className={css.test}> Test </p>
With : import * as css from './Hello.css';是工作。谢谢！

【解决方案2】：

我很新的反应，但我想如果你删除： “从'./Hello.css'导入*作为css；”并将其替换为“import './Hello.css';”

【讨论】：

他正在尝试使用 css 模块而不使用他的 webpack 配置中的选项。
谢谢保罗，这个解决方案有效！我认为 webpack 让事情变得非常复杂。