我的React项目中可能缺少哪些CSS样式没有应用到我的组件上？

Question

我是React的初学者，我无法弄清为什么CSS无法在我的项目中工作。我了解到，在React中我们不直接使用CSS，而是仅通过使用webpack和babel将其解释和理解为JavaScript。

我尝试了什么？我以为更改webpack.config.js文件会起作用，但是我不确定在哪里进行更改以及要更改什么。我关注了StackOverflow中的一些线程，这些线程进行了更改以在项目中加载CSS模块。但是由于我的webpack.config.js似乎默认已经有css模块，我不确定要实现它，原因是我相信我有react-scripts v3.3，默认情况下我们具有CSS模块。

我的反应脚本版本-3.3。另外，我在导入该组件css文件时使用的命名约定为ComponentName.css。我没有使用ComponentName.modules.css文件命名。我不确定我是否在项目的主要文件之一中缺少一些CSS / bootstrap链接。请提出建议，如果我们在Index.js之类的地方这样做。这是我的-

webpack.config.js文件：

// "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,
                      }),
                      // 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: {
                          getLocalIdent: getCSSModuleLocalIdent,
                        },
                      }),
                    },

Answer 1

在webpack.config.js中：我进行了一些更改，在此之前，我从项目中删除了node_build文件夹，并从运行了npm install终端。

与上面的文件相比，可以在此处看到更改：我有添加了这一行-modules：true和删除了这一行-sourceMap：isEnvProduction && shouldUseSourceMap到我的webpack.config.js文件。请比较上面的文件快照和该文件的已回复快照，以检测这些更改。

重要提示：在我发现的一些旧帖子和youtube视频中，我看到了：在添加以下几行之后：

modules: true,
localIdentName: `[hash:base64:...]`,

现在不接受参数localIdentName作为我们通过该行进行的API调用的对象。因此它抛出了ValidationError，因此删除该行对我来说是有效的，因为我的react-scripts版本是3.3，而对于具有react-scripts版本1的人...该行可能仍然有效！

// By default we support CSS Modules with the extension .module.css
        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            modules: true //line added here and removed
          }),
          // 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: {
              getLocalIdent: getCSSModuleLocalIdent,
            },
          }),
        },