我的 React 项目中可能缺少什么 CSS 样式没有应用于我的组件？

Question

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

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

我的 react-scripts 版本 - 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,
            },
          }),
        },