React.JS 新的 CSS 模块

Posted 2023-02-22

【中文标题】React.JS 新的 CSS 模块

【英文标题】：React.JS new CSS modules

【发布时间】：2019-03-08 20:11:59

【问题描述】：

我一直在关注 Udemy 上的 React Complete Guide 教程，但似乎有点过时了，因为在弹出文件后，我看不到相同的代码。我认为它今天已更新，但作为一个完整的初学者，我不知道如何继续我的课程，因为我不知道如何导入具有唯一 ID 的类或如何使 CSS 模块工作......谢谢提前请您帮忙。

他看到了什么： 从第 162 行到第 169 行 This is his code

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

而我所看到的： 从第 34 行到第 41 行 This is my code

// common function to get style loaders const getStyleLoaders =
(cssOptions, preProcessor) =>    const loaders = [
 require.resolve('style-loader'),
 
   loader: require.resolve('css-loader'),
   options: cssOptions,
 ,

我还看到/\.css$/; 有新变量： 第 28 到 32 行

// style files regexes 
const cssRegex = /\.css$/; 
const cssModuleRegex = /\.module\.css$/; 
const sassRegex = /\.(scss|sass)$/; 
const sassModuleRegex = /\.module\.(scss|sass)$/;

【问题讨论】：

如果这是 Max 的课程，您可以直接给他发消息，并且在 udemy 上也有一个论坛

谢谢，我也会这样做的。

看起来 create-react-app 刚刚更新，现在它支持 css-modules 而不需要弹出和更新 webpack。如果我找到一个很好的教程来解释如何在新配置中使用它们，我会添加它。一旦你超越了这一点，我认为 max 不会对 webpack 配置做更多的事情，你应该准备好继续前进

【参考方案1】：

代码

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

如上所示，从第 162 行到第 169 行可以添加到 webpack.config.dev.js 和 webpack.config.prod.js 的另一个字段中 而不是test: /\.css$/， 你会找到 cssRegex，你可以在该部分添加代码

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

【讨论】：

我还按照 Udemy 上的 React Complete Guide 教程进行操作，但遇到了同样的错误。就我而言，它适用于文件“webpack.config.js”，并且只有一个选项“modules：true”。选项“localIdentIName”生成错误。希望对其他人有用

【参考方案2】：

对于任何可能仍然存在相同问题的人，对我来说解决此问题的最佳方法是降级 react-scripts。我只是让package.json和教程一样

之后，我使用npm i --force 运行设置

对不起，如果这不好，但这是跟随教程的最佳方式

【参考方案3】：

从 config/webpack.config.js 替换此代码

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

到下面的代码

 
      test: cssRegex,
      exclude: cssModuleRegex,
      use: getStyleLoaders(
        importLoaders: 1,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: 
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        

      ),
      sideEffects: true,
    ,

【参考方案4】：

如果您使用的 react-scripts 版本高于 1.0.X，则无需担心更改 webpack。 将您的 css 重命名为 SampleName.module.css 并使用“import classes from 'SampleName.module.css'”导入以在您的项目中启用 CSS 模块