Как использовать React с Typescript и SASS
Я загружаю свое приложение с помощью создать-реагировать-приложение и хочу разрабатывать с использованием Typescript и SASS. Раньше я использовал Angular, где я мог легко ссылаться на файл SASS следующим образом:
@Component({
selector: 'unit-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: []
})
В React я пытаюсь импортировать файл SASS следующим образом:
import s from "./mystyles.scss";
Но я получаю ошибку
Cannot find module "./mystyles.scss"
. Как я могу импортировать файл SASS в файл .tsx?
Ответы 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 встроена по умолчанию в проекты [email protected] и выше:
- Создал приложение TypeScript create-реагировать с помощью команды
npx create-react-app my-app --template typescript - Перешел в создание
каталог и установите node-sass с помощью команды
npm install --save node-sass - Изменено сгенерированное по умолчанию
App.cssнаApp.scss - Изменен импорт в
App.tsxсimport './App.css';наimport './App.scss';
Убедитесь, что у вас установлен node-sass. Если это не поможет, вам, возможно, придется пересмотреть, как вы создали/преобразовали свой create-react-app в TypeScript.
Вам нужно либо импортировать его как import './mystyles.scss';, либо поместить module в имя файла и импортировать как import whatever from './mystyles.module.scss';.
привет, вы можете поместить стили scss в переменную в файле TSX?
Я пробовал, но у меня не работает, файл scss работает как простой css, когда я импортирую файлы scss как модули в компоненты (в моем react-ts-starter). Я не знаю, как обстоят дела с «create-react-app». @Штрих-код HJ
Оформить заказ создать-реагировать-приложение с Sass