📺 Посмотрите этот урок на Egghead 🍳
Использование модулей CSS с TypeScript не так очевидно, как с JavaScript. Причина в том, что TypeScript имеет особую обработку для import
s, и если вы попытаетесь использовать модули 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