TypeScript找不到样式模块

Question

我的webpack中有以下基本配置，这与通过TypeScript加载我的样式有关：

{
  module: {
    rules: [{
      test: /\.s?css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            sass: true,
            modules: true,
            camelCase: true,
            importLoaders: 1,
            namedExport: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
          }
        },
        { loader: 'sass-loader' },
      ]
    }],
  },
  resolve: {
    alias: {
      app: srcPath,
    },
    modules: ['node_modules', srcPath],
    extensions: ['.js', '.jsx', '.json', '.scss', '.css', '.tsx', '.ts', '.d.ts'],
  },
}

在我的tsconfig.json中，我有以下内容要匹配：

{
  "compilerOptions": {
    "paths": {
      "app": ["./app"]
    }
  }
}

但是，尝试从app/styles/root.scss加载文件时，我始终遇到错误，具有以下项目结构：

├── components
│   └── Root.tsx
├── styles
│   └── root.scss
├── index.hbs
├── index.scss
├── index.scss.d.ts
└── index.tsx

似乎TypeScript无法正确解析此路径。如果这是一个普通的基于JS的文件，它将工作正常。

奇怪的是，我可以为CSS文件添加root.scss.d.ts定义，它将正确解析。我认为这有点奇怪，因为我专门使用typings-for-css-modules-loader来执行此任务。

如何在Style目录下使用TypeScript解析这些scss文件？

Answer 1

修复

简单

declare module "*.scss";

更多

请参阅JavaScript to TypeScript迁移指南：https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html