🎃

WebpackでCSS Modulesを使おう

2022/08/10に公開

CSS

webpack

tech

CSS ModulesはReactでよく使われているCSSのインポートの仕方です
グローバルのCSSに汚染せず、しかもプラグインなどの導入もせずにCSSを書くことが可能です

ReactのプロジェクトでCSS Modulesを使うのが自然ですが
今回はなるべく原理に触りたいので、Reactなしの環境で記事を書きます

CSS Modulesを使うには最低限Webpack、Vite、Parcelなどの環境が必須です
Node.jsなしの環境でCSS Modulesを使ったらエラーになります

Webpack環境

まずはNode.js環境を作ります

npm init

そして、webpackをインストールします

npm i -D webpack webpack-cli

webpack.config.jsというファイルを作成します

webpack.config.js

module.exports = {
    mode: 'development',
    entry: './src',
    output: {
        filename: 'bundle.js'
    }
}

entry: './src'は'./src/index.js`というファイルを指定します

src/card.jsというファイルを作成します
JSモジュールの作動確認のためにconsole.logを書きます

src/card.js

function Card() {
    console.log('JavaScriptモジュールです')
}

export default Card;

src/index.jsというファイルを作成します

src/index.js

import Card from './card'

new Card();

index.htmlというファイルを作成します

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>CSS Modules</h1>
	<script src="dist/bundle.js"></script>
</body>
</html>

package.jsonにscriptsを追加します

{
	...
	"scripts": {
		...
+		"start": "webpack --watch"
	}
}

これで事前準備が終わりました

CSS Modulesへ

まずはstyle-loaderとcss-loaderをインストールします

npm i -D css-loader style-loader

src/card.module.cssというファイルを作成します
CSSファイルは「〜.module.css」になるのが決まりです

src/card.module.css

.card {
	width: 100px;
	height: 100px;
	background: red;
}

src/card.jsは以下のように修正します

src/card.js

import styles from 'style-loader!css-loader!./card.module.css';

function Card() {
	const el = `
	<div class=${styles.card}>Card</div>
	`

	document.write(el);
}

export default Card;

これで成功です、CSSのSelectorが独自の名前になりました

WebpackでCSS Modulesを使おう

Webpack環境

CSS Modulesへ

参考記事

Discussion