React.JS новые CSS-модули

Question

Я следовал руководству по React Complete Guide по Udemy, но, похоже, оно немного устарело, потому что после извлечения файлов я не вижу тот же код.Я думаю, что он обновлен сегодня, но, как полный новичок, я не знаю, как продолжить мой курс, так как я не знаю, как импортировать классы, которые будут иметь уникальные идентификаторы или как включить модули 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]'
            }),