Как импортировать модули CSS в Typescript с помощью Webpack?
Сгенерировать (или автоматически сгенерировать) .d.ts
файлы для CSS? И используйте классический оператор Typescript import
? С помощью ./styles.css.d.ts
:
import * as styles from './styles.css'
Импорт с использованием функции require
Webpack?
let styles = require("./styles.css");
Но для последнего подхода я должен определить функцию require
.
Каков наилучший подход или лучший вариант, который также может обрабатывать IntelliSense для определения и классов файлов CSS?
A) Как вы говорите, есть один простой (не лучший) вариант использования require:
const css = require('./component.css')
require
, поскольку это не стандартная функция в typescript.Простейшим типированием для этого конкретного требования может быть:
declare function require(name: string): string;
Затем Webpack скомпилирует typescript и правильно использует модули - , но без каких-либо справок IDE и имен классов для сборки.
B) Лучшее решение для использования стандартного импорта:
import * as css from './component.css'
tsc
не удастся выполнить компиляторДля правильного IntelliSense Webpack необходимо сгенерировать определение типов для каждого файла css:
Использовать webpack typings-for-css-modules-loader
webpackConfig.module.loaders: [
{ test: /\.css$/, loader: 'typings-for-css-modules?modules' }
{ test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' }
];
Loader будет генерировать *.css.d.ts
файлы для каждого из файлов css в вашей кодовой базе
Упомянутый typings-for-css-loader
содержит ошибку и из-за задержки генерации файлов, лучше всего объявить глобальный тип *.css
в случае, если наш *.css.d.ts
файл еще не создан.
Это небольшая ошибка:
component.css
import * as css from './component.css'
webpack
component.css.d.ts
), но поздно для компилятора typescript найти новый файл типизацииwebpack
снова будет исправлена ошибка сборки.Простое исправление - создать глобальное определение (например, файл с именем typings.d.ts
в исходном корне) для импорта модулей CSS:
declare module '*.css' {
interface IClassNames {
[className: string]: string
}
const classNames: IClassNames;
export = classNames;
}
Это определение будет использоваться, если нет css файла, сгенерированного (например, вы добавили новый файл css). В противном случае будет использоваться сгенерированное специфическое (должно быть в одной папке и именоваться так же, как и исходный файл + .d.ts
extension), например. component.css.d.ts
и IntelliSense будет работать отлично.
Пример component.css.d.ts
:
export const wrapper: string;
export const button: string;
export const link: string;
И если вы не хотите видеть сгенерированные пиктограммы CSS, вы можете настроить фильтр в среде IDE, чтобы скрыть все файлы с расширением .css.d.ts в ваших источниках.
Или импортировать, используя функцию webpack
Это именно то, что я использовал, и все еще имею этот код в нескольких моих проектах.
Теперь: я написал typestyle: http://typestyle.github.io/#/, но вам не нужно его использовать. Просто придерживайтесь const styles = require('./styles.css')
, если это сделает вас счастливыми. FWIW вы также можете использовать raw css с typestyle, если хотите http://typestyle.github.io/#/raw
let styles = require("./styles.css");
лучше всего подходит, потому что это версия es5 для javascript, которая совместима со всеми функциями реагирования. import * as styles from './styles.css'
- версия javascript для es6.
import * as styles from ...
либоimport styles = require(...
действительны. В любом случае вам, вероятно, придется объявить модуль для вашего css-файла - либо явный, либо общий для всех css-файлов - как машинописный текст Компилятор не будет знать об этом. Смотрите здесь для автоматического генератора определений.