目的
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