反应：CSS类名导入不起作用

Question

我的反应组件中有一个<main> div，并且我从类 css 文件中导入了一些类名，但是当我尝试在浏览器中检查它时，类名没有集成到主 div 中。当我简单地使用其他类名时，它的工作方式类似于 <main className="test"> 但导入类不起作用。

这是我的组件：

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';

const layout = (props) => (
<Aux>
    <div>
        Test paragraph
    </div>
    <main className={classes.Content}>
        {props.children}

    </main>
</Aux>
);

export default layout;

这是我的 CSS

.Content{
   color: red;
   margin-top: 20px;
}

创建后我做了npm run eject命令，如果与webpack配置文件有什么关系请帮帮我 （弹出命令后我没有进行任何更改）

这是 webpack 开发配置文件的 css 部分

{
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
        }),
      },
      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
      // using the extension .module.css
      {
        test: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        }),
 },

Answer 1

import './Layout.css';

然后像普通的 CSS 一样使用它

<main className="Content">

您也可以将您的类用作具有这种格式的对象：

在您的 CSS 文件中：
用 :local(.className) 包装你的课程和 id

示例
:local(.Content) { width: 100px; }

在您的 React 组件中：
import classes from './stylesheet.css'

<div className={classes.Content}></div>

Answer 2

其实我是这样用的：

import classes from './Layout.module.css';

正如您在问题文本中看到的那样：

// 使用扩展名 .module.css

Answer 3

您必须配置一些人员。请按照以下步骤操作：

1. npm run eject 在你的项目根目录中运行这个命令

2. 搜索cssRegex并在use: getStyleLoaders({下添加以下行

       modules:true,
       localIdentName:'[name]__[local]__[hash:base64:5]'
   

享受吧！

Answer 4

确保 'npm runeject' 运行成功，然后您可以访问 config 文件夹中的 webpack.config.js 文件。

1. 停止服务器。
2. 转到 webpack.config.js
3. 找到 cssRegex 并按照图像中给出的更新
4. 重启服务器

Answer 5

如果您使用的是 Windows，请不要将文件命名为“Aux”，它是保留名称。

解决方案只是将您的 CSS 文件命名为（在您的情况下）Layout.module.css，然后按原样导入它们。

您不需要像从 Create React App 2.0 一样弹出，因为它使用开箱即用的 CSS 模块。

Answer 6

你不需要像import classes from './layout.css';这样指定文件的扩展名吗？

尝试安装style-loader 和css-loader 软件包。然后在 webpack 中添加这个：

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

我从css-modules documentation 得到了如果，我希望它能帮助你实现你所需要的。

Answer 7

以上解决方案都不适合我，如果您使用的是 react-scripts@2.0.0 及更高版本的 react 版本，它们可能也不适合您。

您必须使用 [name].module.css 文件命名约定将 CSS 模块与常规样式表一起使用。 CSS Modules 允许通过自动创建格式为 [filename]_[classname]__[hash] 的唯一类名来确定 CSS 的范围。

示例 Header.module.css 注意：这里的标题可以是任何名称

Answer 8

要像对象一样使用类名，您需要做两件事：

1. 像import * as classes from './Layout.css';一样写导入
2. 为您的风格包括类型定义。

Typescript 示例 - 使用 export const Content: string;

创建 Layout.css.d.ts 文件

确保为css-loader 定义camelCase 选项，以将破折号类解析为您在Layout.css.d.ts 中定义的驼峰式属性。

Answer 9

我也在做一个反应教程，遇到了同样的问题。

我在第 420 行更新了我的 webpack.config.js 文件，然后它对我有用。请尝试一下。

第 420 行：

• localIdentName:'[name][local][hash:base64:5]',

Answer 10

最新版本无需设置

localIdentName: '[name][local][hash:base64:5]', // 无需设置任何位置

只需给你的 CSS 名称加上后缀，如 FileName.module.css ex Personal.module.css

然后类名如下所示filename_classname_randomstring

Personal_Person__3L9tz

它对我有用

Answer 11

这对我有用

{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }

}

Answer 12

其他答案对我不起作用 所以我使用了这个解决方案并且工作正常

1：运行npm run eject 命令

2：转到config/webpack.config.js并搜索cssRegex

3：在该特定部分使用此代码

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
  importLoaders: 1,
  modules:{
    localIdentName:'[name]__[local]__[hash:base64:5]'
  },
}),

Answer 13

在项目文件夹的命令行中运行 npm runeject 后将以下配置添加到 config/webpack.config.js 中，propted 时选择yes

Answer 14

我注意到很多对 test: cssRegex 块的引用，尽管你可能在 webpack 配置中没有它。 如果上述情况是您的情况，请尝试打开 webpack.config.dev.js 并找到以 test:/\.css$/ 开头的块（在我的情况下为第 160 行）。然后添加以下行，最终结果如下所示：

  {
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]__[hash:base64:5]'
      },
   },

这应该使 css 模块能够工作。

Answer 15

解决办法如下：

yarn run eject

转到 config/webpack.config.js

将文件更新为screenshot。

            // "postcss" loader applies autoprefixer to our CSS.
            // "css" loader resolves paths in CSS and adds assets as dependencies.
            // "style" loader turns CSS into JS modules that inject <style> tags.
            // In production, we use MiniCSSExtractPlugin to extract that CSS
            // to a file, but in development "style" loader enables hot editing
            // of CSS.
            // By default we support CSS Modules with the extension .module.css
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                localIdentName:'[name]__[local]__[hash:base64:5]',
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent
              }),
            },