webpack4の導入方法（2）スタイルシートのバンドル

スタイルシートのバンドル化ってどういうこと？一見、複数のCSSファイルを1枚のCSSファイルにしてくれる仕組みのような気がしますが、それは違います。それならSASSを使えばスッキリと済むはずです。
ここで行うのはCSSファイルをJavaScript化してさらにstyle属性でCSSを書き出すものです。

そのためには、`css-loader/style-loader`という仕組みを使います。css-loaderはスタイルシートを読み込むためのものです。
また、style-loaderはstyle要素としてHTMLに反映するものです。

＊詳細なコードはGitHubにあります。

簡単なスタイルシートをsrcフォルダに追加しておきます。

h1{
	color:blue;
}

`css-loader/style-loader`の導入

npm install --save-dev css-loader style-loader

次に、webpack.config.jsに`module:{}`部分を追記します。

module.exports = {
	entry:'./src/index.js',
	output:{
		path:`${__dirname}/dist`,
		filename:'main.js'
	},
	devServer:{
		contentBase:'./dist'
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					'style-loader',
					'css-loader'
				]
			}
		]
	}
}

あとはindex.jsに`import ‘./style.css’`を追加します。
`npm start`でブラウザが開きCSSが効いていれば成功です。

index.htmlをブラウザの検証でコードを確認するとheadタグ内にstyleタグが生成されてその中にCSSが記述されているのが確認できます。

スタイルシートを別ファイルにしたい

通常はembedタイプのスタイル設定ではなく別ファイルにする場合が多いです。

この場合はExtractTextPluginを使用します。
ExtractTextPluginの導入は次のようにします。

npm install --save-dev extract-text-webpack-plugin@next

webpack.config.js

module.exports = {
	entry:'./src/index.js',
	output:{
		path:`${__dirname}/dist`,
		filename:'main.js'
	},
	devServer:{
		contentBase:'./dist'
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:ExtractTextPlugin.extract({
					use:'css-loader'
				})
			}
		]
	},
	plugins:[
		new ExtractTextPlugin('style.css'),
		]
}

ここで再度ビルドします。

npm run build

distフォルダにstyle.cssが生成されます。
index.htmlファイルにlink要素でstyle.cssとリンクさせて正しく表示されればOKです。

webpack4の導入方法（2）スタイルシートのバンドル

スタイルシートを別ファイルにしたい

SNSで共有しましょう。