ReactJS 中的 CSS 加载器

reactjsweb developmentfront end technology更新于 2026/1/26 17:37:17

在本文中，我们将学习如何为 React 应用程序提供动态类名。

步骤

npm run eject

此命令允许我们自定义在运行 create-react-app 命令时预定义的配置和选项。这是一个单向操作，之后无法撤消。

更改 Webpack 配置

我们需要配置 Webpack 加载器以启用 css-loader，它将为我们的类提供动态命名。

将配置设置为 −

{
   test: /\.css$/,
   loader: 'style-loader'
}, {
   test: /\.css$/,
   loader: 'css-loader',
   query: {
      modules: true,
      localIdentName: '[name]_[local]__[hash:base64:5]'
   }
}

Import css files dynamically

import styles from './App.css'

示例

在此示例中，我们将构建一个对 JSX 元素的类进行动态命名的 React 应用程序。

App.jsx

import React from 'react';
import styles from './App.css'
const App = () => {
   return (
      <div classname={styles.App}>
      <h2>TutorialsPoint</h2>
      </div>
   );
};
export default App;

在上面的例子中，为 <div> 标签提供了一个动态类名。