Как импортировать модули CSS с помощью Typescript, React и Webpack

Ответ 1

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'

• позволяет использовать полные имена классов IntelliSense
• требует определения типов для каждого файла 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 в вашей кодовой базе

• Typescript компилятор поймет, что импорт css будет модулем со свойствами (именами классов) строки типа.

Упомянутый typings-for-css-loader содержит ошибку и из-за задержки генерации файлов, лучше всего объявить глобальный тип *.css в случае, если наш *.css.d.ts файл еще не создан.

Это небольшая ошибка:

• Создать файл css component.css
• Включить его в компонент import * as css from './component.css'
• Запустить webpack
• Typescript компилятор попытается скомпилировать код (ERROR)
• Loader будет генерировать файл типовых модулей Css (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 в ваших источниках.

Ответ 2

Я добавил файл с именем Global.d.ts или typings.d.ts в мою папку ./src с некоторыми определениями типов:

declare module "*.module.css";

Webpack css config:

{
  test: /\.css$/,
  use: [
    isProductionBuild ? MiniCssExtractPlugin.loader : "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: "[name]_[local]_[hash:base64]",
        sourceMap: true,
        minimize: true
      }
    }
  ]
},

Затем я просто импортирую модуль, например: import styles from "./App.module.css";

Ответ 3

Или импортировать, используя функцию webpack

Это именно то, что я использовал, и все еще имею этот код в нескольких моих проектах.

Теперь: я написал typestyle: http://typestyle.github.io/#/, но вам не нужно его использовать. Просто придерживайтесь const styles = require('./styles.css'), если это сделает вас счастливыми. FWIW вы также можете использовать raw css с typestyle, если хотите http://typestyle.github.io/#/raw

Ответ 4

let styles = require("./styles.css"); лучше всего подходит, потому что это версия es5 для javascript, которая совместима со всеми функциями реагирования. import * as styles from './styles.css' - версия javascript для es6.