Реактивный импорт CSS модулей несовместим с машинописью - PullRequest
Новая
       34

Реактивный импорт CSS модулей несовместим с машинописью

0 голосов
/ 07 ноября 2019

Я хочу использовать css-модули в моем приложении реакции. Я установил пакет nuget 'typings-for-css-modules-loader' и сконфигурировал его в webpack.config.js следующим образом: 

test: /\.css$/,
use: [
    'style-loader',
    '@teamsupercell/typings-for-css-modules-loader',
    {
        loader: "css-loader",
        options: {
            modules: true,
        }
    }
]

Файл styles.css.d.ts генерируется и выглядит так: 

export interface IStylesCss {
  x: string;
}

export const locals: IStylesCss;
export default locals;

Я использую awesome-typescript-загрузчик, который настроен в webpack.config.js следующим образом: 

{
    test: /\.tsx?$/,
    use:
    {
        loader: "awesome-typescript-loader"
    }
},

Вот описание проблемы:

Еслия использую import * as styles from './styles.css'; + className={styles.x}, не работающий из-за ошибки компиляции. 'Свойство' x 'не существует для типа ...'

className={styles.default.x} тоже не работает, потому что значение по умолчанию не определено.

импорт по умолчанию import styles from './styles.css'; + className={styles.x} не работает, опять же, значение по умолчанию не определено.

import * as styles from './styles.css'; + className={(styles as any).x} работает, но я теряю строгую типизацию и этоне выглядит для меня правильным решением.

1 Ответ

0 голосов
/ 07 ноября 2019

Установив для allowSyntheticDefaultImports и esModuleInterop значение true в tsconfig.json asi, исправление работало для меня. В ожидании исправления.

...