Загрузите модуль CSS в ReactJS + Typescript и отреагируйте переписанным - PullRequest
Новая
       30

Загрузите модуль CSS в ReactJS + Typescript и отреагируйте переписанным

0 голосов
/ 07 июня 2018

Я создаю начальную настройку проекта для проверки концепции с использованием ReactJS и машинописного текста, и я хотел бы включить в него модули CSS без необходимости извлечения конфигурации веб-пакета.

ВотШаги, которые я выполнил до сих пор:

  • npm install -g create-Reaction-app
  • create-Reaction-app firstapp --scripts-version =act-scripts-ts
  • npm install реактивное приложение-rewired --save-dev
  • npm install --save-dev codebandits / реагировать-app-rewire-css-modules sass-загрузчик node-sass
  • package.json: "запуск": "запуск по реакции-app-rewired - версия-скрипта-реакции-скрипты-ts"

  • config-overrides.js:

    const rewireCssModules= require ('response-app-rewire-css-modules');module.exports = переопределение функции (config, env) {config = rewireCssModules (config, env);
    return config;}

Я правильно установил свой файл App.module.scss и сослался на него в своем файле App.tsx:

импорт стилей из './App.module.scss ';

Когда я запускаю проект, у меня возникает ошибка, связанная с модулем css: Не удается найти модуль' ./App.module.scss'.

Когда я выполняю точно такой же проектбез конфигурации машинописного текста это работает.

Что я должен изменить, чтобы модули CSS учитывались?

Я столкнулся с typings-for-css-modules-loader, но яЯ не уверен, как интегрировать его в мою конфигурацию, так как я не извлек конфигурацию веб-пакета.

Заранее спасибо,

Thomas .T

РЕДАКТИРОВАТЬ1: Я добавил файл global.d.ts с:

  • объявление модуля '* .css'

  • объявление модуля '* .scss '

И это сработало.В конце я не использовал typings-for-css-modules-loader.

Ответ приходит из этой статьи: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Я нашел обходной путь после того, как много гуглил.Я новичок в реагировании на js и пытаюсь построить с использованием машинописного текста, поэтому я нашел решение и начал использовать пакет

response-script-ts

.Но когда я начал использовать модуль css, столкнулся с проблемой, что класс импорта из './button.css' не работал, поэтому я использовал import' ./button.css', но в этоместь много конфликтов css, более высокая область видимости css всегда переопределяется более низким компонентом.так много погуглил и наконец-то нашел решение.

Solution Из 2.1 create-реакции-приложение с поддержкой машинописи, поэтому конвертируйте ваше приложение в 2.1 выше 

1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run

источник: https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/

0 голосов
/ 08 июня 2018

Я добавил файл global.d.ts с:

  • объявить модуль '* .css'
  • объявить модуль '* .scss'

И это сработало.В конце я не использовал typings-for-css-modules-loader.

Ответ приходит из этой статьи: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a

Собираюсь принять это как ответ в течение 2 дней.

...