📺 Посмотрите этот урок на Egghead 🍳

Использование модулей CSS с TypeScript не так очевидно, как с JavaScript. Причина в том, что TypeScript имеет особую обработку для imports, и если вы попытаетесь использовать модули CSS так же, как в JavaScript:

import s from './Button.css';

Вы получите сообщение об ошибке: «Не удается найти модуль‘ ./Button.css ’». Есть несколько способов исправить это.

Легкий путь

Вы можете обойти магию импорта TypeScript, используя require вместо import:

const s = require('./Button.css');

Он обрабатывается веб-пакетом как обычно, но у вас не будет проверки типа и автозаполнения для имен классов CSS.

Лучший способ

Чтобы использовать import, вам понадобится набор текста для CSS. Например, у вас Button.css вот так:

.foo {
  color: chocolate;
}
.barBaz {
  color: tomato;
}

Теперь вам понадобится Button.css.d.ts вот так:

export const foo: string;
export const barBaz: string;

Typings-for-css-modules-loader является заменой для css-loader, который генерирует типизацию для CSS на лету. Установим:

npm install --save-dev typings-for-css-modules-loader

Затем обновите конфигурацию вашего веб-пакета:

module: {
  rules: [
    {
      test: /\.css$/,
      include: path.join(__dirname, 'src/components'),
      use: [
        'style-loader',
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            modules: true,
            namedExport: true
          }
        }
      ]
    }
  ]
}

Теперь вы можете импортировать такие стили:

import * as s from './Button.css';

Проверка типа и автозаполнение будут работать должным образом:

Подпишитесь на мою рассылку: https://tinyletter.com/sapegin