Как использовать React с Typescript и SASS

Question

Я загружаю свое приложение, используя create-реагировать-приложение , и я хочу разрабатывать, используя Typescript и SASS.Ранее я использовал Angular, где я мог легко ссылаться на файл SASS следующим образом:

@Component({
  selector: 'unit-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: []
})

В React я пытаюсь импортировать файл SASS следующим образом:

import s from "./mystyles.scss";

Но яполучаю ошибку

Не удается найти модуль "./mystyles.scss"

.Как я могу импортировать файл SASS в файл .tsx?

Answer 1

Предполагая, что вы успешно установили node-sass в приложении TypeScript create-react-app React, точно так же, как Добавьте / импортируйте таблицу стилей CSS , выполнив следующие действия:

import './mystyles.css';

Для таблицы стилей SCSS вы просто измените тип файла:

import './mystyles.scss';

В вашем примере вам просто нужно обращаться с ним как с Импортировать модуль только для его побочных эффектов вместо импорта по умолчанию, как вы сейчас пытаетесь.

Вы также можете рассматривать его как Модуль SCSS , обновив имя файла SCSS до mystyles.module.scss и импортировав его следующим образом:

import styles as './mystyles.module.scss';

Мне удалось добиться обеих функциональных возможностей, выполнив следующие действия, поскольку поддержка Sass / SCSS встроена по умолчанию в react-scripts@2.0.0 и более поздних проектах:

1. Создано приложение Type-create-реакции-приложение с помощью команды npx create-react-app my-app --typescript
2. Перешел в создание каталог и установить node-sass с помощью команды npm install --save node-sass
3. Изменено сгенерированное значение по умолчанию App.css на App.scss
4. Изменен импорт в App.tsx с import './App.css'; на import './App.scss';

Убедитесь, что у вас установлен node-sass. Если это не поможет, возможно, вам придется пересмотреть, как вы создали / преобразовали create-react-app в TypeScript.

Вам нужно либо импортировать его как import './mystyles.scss';, либо ввести module в имя файла и импортировать его как import whatever from './mystyles.module.scss';.

Надеюсь, это поможет!