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时，您需要相应的加载器来启用对scss的支持。您可以在sass-loader docs找到有关配置的详细信息以启用此功能。在您明确了解webpack文档之前，先了解一下webpack和加载器的工作原理。这可能在某种程度上让人感到困惑。

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

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

1 个答案: