параметр машинописного машинописного текста для разрешения импорта scss

Question

Я использую следующие параметры компилятора для инструмента, который я создаю, и я вижу ошибку, когда компилятор не может найти скомпилированный файл scss.

Другими словами, у меня есть следующие файлы:

• ClassA.tsx
  • Этот файл строку: import styles from './ClassA.module.scss';
• ClassA.module.scss

После скомпилирования файлов у меня есть файлы:

• ClassA.js
  • Этот файл имеет следующую строку: var ClassA_module_scss_1 = require('./ClassA.module.scss');
• Class.module.scss.js

И я вижу ошибку: Cannot find module ClassA.module.scss

Это мои варианты компилятора:

compilerOptions: { 
    target: typescript.ScriptTarget.ES5, 
    module: typescript.ModuleKind.CommonJS, 
    moduleResolution: typescript.ModuleResolutionKind.NodeJs, 
    rootDir: this.buildConfig.rootPath, 
    declaration: true, 
    experimentalDecorators: true, 
    jsx: typescript.JsxEmit.React, 
    sourceMap: true 
    } 

Есть ли что-то особенное, что я должен сделать для разрешения файла scss?

Answer 1

Импорт активов или таблиц стилей не является функцией, поддерживаемой самим TypeScript. Чтобы это работало, вам нужен модуль-модуль, который знает об импортерах без машинописных/javascript, таких как изображения или файлы scss. Webpack - это такой инструмент, который обрабатывает импорт активов и может сделать гораздо больше для вас.

http://webpack.github.io/

При интегрировании Webpack, вам нужны соответствующие погрузчики, чтобы включить поддержку СКС. Вы можете найти более подробную информацию о его настройке, чтобы включить это на sass-loader docs. Прежде чем вы обязательно посмотрите на документы webpack, чтобы получить общее представление о том, как работают webpack и загрузчики. Это может быть как-то запутанным в начале.

Обратите внимание, что в настоящее время версия 2 веб-пакета все еще находится в разработке, и вы можете столкнуться с некоторыми учебниками, которые не работают для версии 1.