`yarn run eject`

Question

我的react组件中有一个<main> div，并且我从类文件中导入了一些类名，但是当我尝试在浏览器中检查该类名时，该类名未集成到主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

确保“ npm run弹出”运行成功，然后您可以访问config文件夹中的webpack.config.js文件。

停止服务器。
转到webpack.config.js
找到cssRegex并按照图片中的说明进行更新
重新启动服务器

Answer 2

import './Layout.css';

然后像普通CSS一样使用它

<main className="Content">

Answer 3

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

解决方案只是将CSS文件命名为Layout.module.css（对于您而言），然后将其导入。

您无需从Create React App 2.0中退出，因为它使用了现成的CSS模块。

Answer 4

您是否不需要指定文件的扩展名，例如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得到了if，我希望它能帮助您实现所需。

Answer 5

在您的CSS文件中：
用:local(.className)

包装您的课程和ID

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

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

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

Answer 6

实际上我是这样使用的：

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

如您在问题文本中所看到的：

//使用扩展名.module.css

Answer 7

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

npm run eject在您的项目根目录中运行此命令

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

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

享受！

Answer 8

我也在编写反应教程，并且遇到了同样的问题。

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

第420行：

localIdentName：'[name] [local] [hash：base64：5]'，

Answer 9

对于最新版本，无需设置

localIdentName：'[名称] [本地] [hash：base64：5]'，//无需在任何位置设置

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

然后按如下所示的类名 filename_classname_randomstring

Personal_Person__3L9tz

为我工作

Answer 10

这对我有用

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

}

Answer 11

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

1：运行resource "azurerm_databricks_workspace" "workspace" { name = "testdata" resource_group_name = "cloud-terraform" location = "east us" sku = "premium" virtual_network_id = azurerm_virtual_network.vnet.id public_subnet_name = "databrickpublicsubnet" public_subnet_cidr = "10.0.0.0/22" private_subnet_name = "databrickprivatesubnet" private_subnet_cidr = "10.0.0.0/22" tags = { Environment = "terraformtest" } }命令

2：转到npm run eject并搜索config/webpack.config.js

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

cssRegex

Answer 12

在项目文件夹的命令行中运行npm run弹出后，只需将以下配置添加到config / webpack.config.js中，并在受支持时选择是

enter image description here

Answer 13

我注意到很多引用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 14

以上解决方案都不适合我，如果您使用的React版本具有react-scripts@2.0.0或更高版本，它们可能也对您不起作用。

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

示例Header.module.css nb：标头可以是任何名称

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
              }),
            },

React：CSS类名导入不起作用

15 个答案:

`yarn run eject`