React.JS新的CSS模块

Question

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

他看到的是： 从第162行开始到169 这是他的代码

 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行 这是我的代码

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