scssインポートを解決するためのtypescriptコンパイラオプション

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自体でサポートされている機能ではありません。これを行うには、画像やscssファイルのような非typescript/javascriptのインポートを認識しているモジュールバンドラが必要です。 Webpackは、資産のインポートを処理するツールであり、さらに多くのことを行うことができます。

http://webpack.github.io/

のWebPACKを統合する場合、あなたはSCSSのサポートを有効にするには、対応するローダーを必要としています。これを有効にする設定の詳細については、sass-loader docsを参照してください。 Webpackとローダーの仕組みを一般的に理解するには、webpackドキュメントを必ず確認してください。これは何とか初めに混乱することがあります。

現在、webpackのバージョン2はまだ開発中であり、バージョン1では動作しないチュートリアルがあることにご注意ください。