CSS in Typescript

TypeScript React.js CSS
CSS in Typescript

Использование машинописного текста не более чем из-за его ограничений кода и возможностей подсказок.В качестве примера возьмем реакцию:

оригинальная структура

Структура каталогов компонентов

Error
│   index.scss
│   index.tsx

index.tsx

import * as React from 'react'

import * as styles from './index.scss'

const Error = () => (
    <div className={styles.centered}>
        <div className={styles.emoji}>😭</div>
        <p className={styles.title}>Ooooops!</p>
        <p>This page doesn't exist anymore.</p>
    </div>
)

export default Error

index.scss

.centered {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.emoji {
    font-size: 9em;
    user-select: none;
}

.title {
    font-size: 3em;
    text-align: center;
    color: gray;
}

Без какой-либо настройки, если нет аварии, сообщается об ошибке 😂

Помимо веб-пакета, с точки зрения машинописного текста, я не знаю scss

Обычно есть три решения

  1. Использование требует письменного

    const styles = require('./index.scss')

    требуется определение по умолчанию

  2. добавить глобальное объявление

    declare module '*.scss' {
  const content: any;
  export default content;
}

    Изменить импорт

    import styles from './index.scss'

  3. Создайте index.scss.d.ts для index.scss

Как сказано в начале,Использование машинописного текста не более чем из-за его ограничений кода и возможностей подсказок., то третье — наше оптимальное решение.

как генерировать

typed-css-modules

github

Использование typed-css-модулей относительно простое, в основном через командную строку для генерации d.ts, поддержка режима просмотра

tcm src -c -w

Конечно, вы также можете разрабатывать свои собственные плагины, введя модуль typed-css-modules.

typings-for-css-modules-loader

github

typings-for-css-modules-loader — это загрузчик веб-пакета. Измените правила файла scss в модуле в файле конфигурации веб-пакета.

const typingsForCssModulesLoaderConf = {
    loader: 'typings-for-css-modules-loader',
    options: {
        modules: true,
        namedExport: true,
        camelCase: true,
        sass: true
    }
}
......
[
    {
        test: /\.scss$/,
        exclude: resolve('src/commonStyles'),
        rules: [
            {
                use: ['style-loader', typingsForCssModulesLoaderConf]
            }
        ]
    },
    {
        // 位于src/commonStyles里的不使用css module
        test: /\.scss$/,
        include: resolve('src/commonStyles'),
        rules: [
            {
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
]

Чтобы webpack не тормозил из-за генерации многочисленных scss.d.ts, добавьте его в плагин webpack

new webpack.WatchIgnorePlugin([/css\.d\.ts$/])

генерировать результаты

Окончательная структура каталогов двух вышеупомянутых методов создания d.ts такова:

Error
│   index.scss
│   index.scss.d.ts
│   index.tsx

index.scss.d.ts

export const centered: string;
export const emoji: string;
export const title: string;

Наконец-то можно с радостью использовать className в scss

Категории