Разве вам не нужно указывать расширение файла, например import classes from './layout.css';?

Попробуйте установить пакеты style-loader и css-loader. Затем добавьте в свой веб-пакет это:

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

Я получил его от документация по css-модулям, и я надеюсь, что он поможет вам достичь того, что вам нужно.

import './Layout.css';

Затем используйте его как обычный CSS

<main className = "Content">

Вы также можете использовать свои классы как объекты в этом формате:

В вашем файле CSS:
Оберните свои классы и идентификаторы в :local(.className)

Пример
:local(.Content) { width: 100px; }

В вашем компоненте React:
import classes from './stylesheet.css'

<div className = {classes.Content}></div>

Чтобы использовать имена классов как объекты, вам нужно сделать 2 вещи:

1. Напишите импорт как import * as classes from './Layout.css';
2. Включите определение набора текста для вашего стиля.

Пример для Typescript - создайте файл Layout.css.d.ts с export const Content: string;

Убедитесь, что вы определили опцию camelCase для css-loader, чтобы разрешить тире-классы в свойства верблюжьего регистра, которые вы определяете в Layout.css.d.ts.

На самом деле я использовал это так:

import classes from './Layout.module.css';

Как вы видите в тексте вашего вопроса:

// using the extension .module.css

Вам нужно настроить некоторые кадры. Следуй этим шагам:

1. npm run eject запустите эту команду в корневом каталоге вашего проекта.

2. найдите cssRegex и добавьте следующие строки в use: getStyleLoaders({

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

Наслаждаться!

Я также работал над учебником по реагированию и столкнулся с той же проблемой.

Я обновил свой файл webpack.config.js в строке 420, и тогда он работал у меня. Пожалуйста, попробуйте.

строка 420:

• localIdentName: '[имя] [местный] [hash: base64: 5]',

Убедитесь, что команда 'npm run eject' запущена успешно, после чего вы сможете получить доступ к файлу webpack.config.js в папке config.

1. Остановите сервер.
2. Перейдите в webpack.config.js
3. Найдите cssRegex и обновите, как показано на изображении
4. Перезагрузите сервер

Вот решение:

yarn run eject

Заходим в config / 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,
                modules: true,
                localIdentName:'[name]__[local]__[hash:base64:5]',
              }),
              // 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: true,
                getLocalIdent: getCSSModuleLocalIdent
              }),
            },

Если вы используете Windows, не называйте файл «Aux», это зарезервированное имя.

Решение - просто назвать ваши файлы CSS как (в вашем случае) Layout.module.css, а затем импортировать их как таковые.

Вам не нужно извлекать, как из Создать приложение React 2.0, поскольку он использует модули CSS из коробки.

Для последней версии не нужно устанавливать

localIdentName: '[name] [местный] [hash: base64: 5]', // не нужно указывать где

Просто укажите свое имя css с постфиксом, например FileName.module.css ex Personal.module.css

Затем имя класса, как показано ниже filename_classname_randomstring

Personal_Person__3L9tz

это работает для меня

это работает для меня

{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }

}

другие ответы не сработали для меня поэтому я использовал это решение и отлично работал

1: запустите команду npm run eject

2: перейдите к config/webpack.config.js и найдите cssRegex

3: используйте этот код в этом конкретном разделе

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

Просто добавьте приведенную ниже конфигурацию в config / webpack.config.js после запуска npm run eject в командной строке в папке проекта и выберите «Да», когда это будет предложено.

Я заметил много ссылок на блок test: cssRegex, хотя у вас его может не быть в конфигурации webpack. Если это ваш случай, попробуйте открыть webpack.config.dev.js и найти блок, начинающийся с test: /\.css$/, (строка 160 в моем случае). Затем добавьте следующие строки, чтобы окончательный результат выглядел так:

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

Это должно позволить модулям css работать.

Ни одно из вышеперечисленных решений не помогло мне, если вы используете версию реакции с [email protected] и выше, они, вероятно, не будут работать и для вас.

вы должны использовать модули CSS вместе с обычными таблицами стилей, используя соглашение об именах файлов [name] .module.css. Модули CSS позволяют определять область действия CSS путем автоматического создания уникального имени класса в формате [имя файла] _ [имя класса] __ [хэш].

пример Header.module.css nb: заголовок здесь может быть любым