Блог

Я загружаю свое приложение с помощью create-react-app и хочу разрабатывать с использованием 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?

Предполагая, что вы успешно установили node-sass приложение React на TypeScript create-react-app , точно так же, как вы бы добавили / импортировали таблицу стилей 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. Создал TypeScript create-react-app с помощью команды npx
create-react-app my-app --template typescript
2. Перейдите в каталог create и установите 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'; .