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

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

著者：

解　説

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

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

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

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

CSS
1
2
3
h1{
color:blue;
}

css-loader/style-loaderの導入

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

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

JavaScript
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の導入は次のようにします。

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

webpack.config.js

JavaScript
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'),
]
}

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

Shell
1
npm run build

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