typescript編譯器選項用於解決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自身支持的功能。爲了這個工作，你需要一些模塊捆綁器，它知道像圖像或scss文件這樣的非typecript/javascript導入。 Webpack是一種處理資產導入的工具，可以爲您做更多工作。

http://webpack.github.io/

當集成的WebPack，需要相應的裝載機啓用SCSS支持。你可以在sass-loader docs找到更多關於配置的信息。在你確定看看webpack文檔之前，大致瞭解webpack和加載程序的工作原理。這在開始時可能會讓人困惑。

請注意，目前webpack的第2版仍在開發中，您可能會遇到一些不適用於版本1的教程。