EdMSL
@EdMSL
Free Developer

Как правильно работать с CSS модулями в React?

Доброго времени суток. Давно не занимался фронтом, решил написать небольшой проект. У меня есть шаблон, который я решил использовать, но перевести сборку c Webpack 4 на 5. Набор стандартный: React + TypeScript, Redux, Sass. Использую CSS модули.Стили в компоненты я импортирую так:

const styles = require('./styles.module.scss');
И чтобы назначить класс какому-либо элементу я писал так:
<h1 className={styles.title}>Hello World!</h1>
И все работало. Но теперь чтобы получить желаемый эффект приходится писать так:
<h1 className={styles.default.title}>Hello World!</h1>

Если я не добавлю default, то получу в импорте Module:
Module {
  default: Object
    title: "title___1pnWo"
  __proto__: Object
  Symbol(Symbol.toStringTag): "Module"
  __esModule: true
  get default: () => (__WEBPACK_DEFAULT_EXPORT__)
  __proto__: Object
}

Перечитал документации, но ничего нового про такой стиль записи не нашел. Для css конфиг в Вебпаке такой:
test: /\.(scss|sass|css)$/,
use: [
      {
        loader: mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: {
            sourceMap: mode === 'development',
            importLoaders: 3,
            modules: {
              localIdentName: '[local]___[hash:base64:5]',
            },
          },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: mode === 'development',
          sassOptions: {
            outputStyle: 'expanded',
          },
        },
      },
      {
        loader: 'sass-resources-loader',
        options: {
          sourceMap: mode === 'development',
          resources: `${resourcesPath}/**/*.scss`,
        },
      },
    ]

Что я делаю не так?
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle
\( ゚ヮ゚)/
Вариант 1 - использовать import/export.
Вариант 2 - require('file').default.
Ответ написан
EdMSL
@EdMSL Автор вопроса
Free Developer
Вариант 1 пробовал. Второй да, можно так, но мне бы понять причину сего. Почему теперь нужно добавлять default? Если это теперь так работает, то почему в документации ни слова (в доках к css-loader).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы