こんにちは。
今回はwebpackでSassの導入、file-loaderを使いcssで指定されたの画像を出力していきます。
Sassは便利な機能が多いので好きです。積極的に導入していきたいですね。
目次
はじめに
webpackの導入方法は割愛します。こちら（webpack導入方法）を参考に導入してください。
ファイル構成
今回はこちらのディレクトリ構成で進めて行きます。
root
┗dist/ // 出力先
┗src/
┗index.html
┗js/
┗index.js
┗styles/
┗style.scss
┗common.scss
┗images/
┗sample.png
┗package.json
┗webpack.config.js
パッケージのインストール
最初に必要なパッケージをインストールします。
$ npm instal css-loader style-loader sass-loader file-loader --save-dev
もしくは
$ yarn add css-loader style-loader sass-loader file-loader --dev
webpack.config.jsの設定
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/js/index.js', //エントリーポイントの設定
output: {
path: path.resolve(__dirname, 'dist'), // 出力先になるパスの指定
filename: 'bundle.js', // 出力先になるjsファイルの指定
},
module: {
rules: [
{
test: /\.(scss)$/, // 対象ファイルの拡張子を指定
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.(png)$/, // 対象ファイルの拡張子を指定
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]', // 画像ファイルの名前の設定
outputPath : 'images/', // パスの設定
}
},
],
}
]
}
}
cssのloader設定
style-loaderとはHTML上でcss読み込む設定をします。簡単に言うとHTMLファイルの<link>タグ でcssの読み込みをするのと同じことをしています。
css-loaderでcssファイルをバンドルし、sass-loaderでSassファイルをcssファイルにコンパイルします。
注意点として、use: []内で指定したローダーは、後ろから順番に読み込まれます。記述する順番に注意しましょう！
上記の設定だと、「sass-loaderでSassをcssにコンパイル→css-loaderでcssファイルをバンドル→style-loaderでバンドルされたスタイルを読み込み」という流れになります。
file-loader設定
file-loaderとはcss内の画像をバンドルせず外部ファイルとして出力することができます。
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath : 'images/',
}
}
name: '[name].[ext]'で画像ファイル名の指定、outputPath : 'images/'で出力先のパスを指定できます。
今回はdist/images/内に画像ファイルが出力されるように設定しています。
各ファイルの作成
必要なファイルを作成していきます。
HTMLファイルの作成
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div class="background"></div>
</body>
</html>
Sassファイルの作成
src/styles/にstyle.scssとcommon.scssを作成します。
style.scss
@import './common.scss';
common.scss
$main-color: #aacc04;
body {
background-color: $main-color;
}
.background {
height: 300px;
width: 300px;
background: url('../images/samole.png');
}
JSファイルの作成
エントリーポイントとなるsrc/js/index.js内でstyle.scssをimportさせます。
index.js
import '../styles/style.scss';
こちらで設定は完了です。
最後にコマンド叩いてビルドしてみましょう。
package.json の “scripts” を以下のように編集
package.json
"scripts": {
"build": "webpack"
}
$ npm run build
もしくは
$ yarn run build
出力先のdist/bundle.jsにcssの内容がバンドルされているのが確認できると思います。また、dist/にimageディレクトリが作成され、cssで指定していた画像が出力されていると思います。
以上で完了となります。
まとめ
今回はwebpackでSassの導入の導入をしました。
比較的簡単に導入できるので、是非参考にしてみてください。
最後までお読みいただきありがとうございます。