用于解析 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 本身支持的功能。为此，您需要一些能够识别 non-typescript/javascript 图像或 scss 文件导入的模块捆绑器。 Webpack 就是这样一个处理资源导入的工具，可以为你做更多的事情。

http://webpack.github.io/

集成webpack时需要相应的loader开启对scss的支持。您可以在 sass-loader docs 找到有关配置它以启用此功能的更多详细信息。在您绝对应该查看 webpack 文档以大致了解 webpack 和加载器的工作原理之前。这在开始时可能会让人感到困惑。

请注意，当前 webpack 版本 2 仍在开发中，您可能会遇到一些不适用于版本 1 的教程。

用于解析 scss 导入的 typescript 编译器选项

typescript compiler option for resolving scss imports

commonjs

typescript

typescript2.0