スタイルシートのバンドル化ってどういうこと？一見、複数のCSSファイルを1枚のCSSファイルにしてくれる仕組みのような気がしますが、それは違います。それならSASSを使えばスッキリと済むはずです。
ここで行うのはCSSファイルをJavaScript化してさらにstyle属性でCSSを書き出すものです。
そのためには、css-loader/style-loaderという仕組みを使います。css-loaderはスタイルシートを読み込むためのものです。
また、style-loaderはstyle要素としてHTMLに反映するものです。
簡単なスタイルシートをsrcフォルダに追加しておきます。
|
1 2 3 |
h1{ color:blue; } |
css-loader/style-loaderの導入
|
1 |
npm install --save-dev css-loader style-loader |
次に、webpack.config.jsにmodule:{}部分を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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の導入は次のようにします。
|
1 |
npm install --save-dev extract-text-webpack-plugin@next |
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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'), ] } |
ここで再度ビルドします。
|
1 |
npm run build |
distフォルダにstyle.cssが生成されます。
index.htmlファイルにlink要素でstyle.cssとリンクさせて正しく表示されればOKです。