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

Question

我正在为我正在制作的工具使用以下编译器选项，当编译器找不到已编译的 scss 文件时，我看到一个错误。

换句话说，我有以下文件：

• A 类.tsx
  • 这个文件有一行：import styles from './ClassA.module.scss';
• ClassA.module.scss

文件编译后我有文件：

• A 类.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 本身支持的功能。为此，您需要一些模块捆绑器，它知道非 typescript/javascript 导入，如图像或 scss 文件。 Webpack 就是这样一个工具，它可以处理资产的导入，并且可以为您做更多的事情。

http://webpack.github.io/

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

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