Question

我一直在关注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)$/;

Answer 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]'
            }),

Answer 2

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

之后，我使用 npm i --force

运行设置

抱歉，如果这不是一个好方法，但这是跟随教程的最佳方式

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

Answer 4

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

React.JS新的CSS模块

4 个答案: