目的

TypeScriptでcssをインポートしたい
型定義ファイル(d.ts)を自動生成したい
型定義ファイルの自動生成は@teamsupercell/typings-for-css-modules-loaderを利用
(fork元のtypings-for-css-modules-loaderはメンテナンスされていない様子)

結果

型定義ファイル出力後
https://github.com/nsym7372/typescript-import-css

前提

インストール

package.json(抜粋)

  "devDependencies": {
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.3",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }

ファイル配置

C:.
|   package-lock.json
|   package.json
|   tsconfig.json
|   webpack.config.js
|   
+---dist
|       index.html
|       index.js
|       
+---node_modules
|       (省略)
|               
\---src
        app.ts
        style.css

配置したファイルの内容

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="root">Hello World</h1>
    <script src="index.js"></script>
</body>
</html>

app.ts

import * as style from "./style.css";  //style.css.d.tsが生成されるまではエラー

//cssの利用がない場合は、style.css.d.tsが出力されない
document.getElementById("root").classList.add(style.warn);

style.css

.warn{
    color:red;
}

手順

@teamsupercell/typings-for-css-modules-loader導入

インストール

npm i -D @teamsupercell/typings-for-css-modules-loader

webpack.config 作成
プロジェクトのルートフォルダに配置

webpack.config

const path = require("path")

module.exports = {
    entry: "./src/app",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    module:{
        rules:[
            {
                test: /\.ts$/,
                loader: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "@teamsupercell/typings-for-css-modules-loader",
                    {
                        loader: "css-loader",
                        options: { modules: true }
                    }
                ]
              }
        ]
    },
    resolve:{
        extensions:[".ts", ".css"]
    }
}

declare.d.tsを追加

srcフォルダ以下（style.cssと同じフォルダ）に作成

declare.d.ts

declare module '*.css';

webpackコマンドを実行して、d.tsファイルを自動生成

package.json(抜粋)

  "scripts": {
    "build": "webpack --config webpack.config.js"
  },

npm run build

動作確認

srcフォルダ以下にstyle.css.d.tsが作成されていることを確認

style.css.d.ts

declare namespace StyleCssModule {
  export interface IStyleCss {
    warn: string;
  }
}

declare const StyleCssModule: StyleCssModule.IStyleCss & {
  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
  locals: StyleCssModule.IStyleCss;
};

export = StyleCssModule;

参考

@teamsupercell/typings-for-css-modules-loader
https://www.npmjs.com/package/@teamsupercell/typings-for-css-modules-loader