webpack5 をほぼチュートリアル通りに進めるその2（sassのビルド）

最終更新日: 2021-06-02

Asset Management - webpack をすすめる。

下記記事参考
webpackとBabelの基本を理解する(5) ―Sass編― - qiita

sass ファイルをビルドする

ファイル構成

app/
  ├ main.js
  └ sass/
      ├ style.scss
      └ scss ファイルなど色々 
package.json
public/
  ├ index.html
  └ css/
webpack.config.js

インストール

sass-loader - webpack
node-sass - github
- sass-loader requires you to install either Dart Sass or Node Sass on your own (more documentation can be found below).
  sass-loader を使う時に必要らしい。
css-loader
style-loader
- html ファイルに css を直接書き込むローダー。

$ npm install sass-loader node-sass css-loader style-loader --save-dev

app/main.js

import style from './sass/style.scss'

webpack.config.js

const path = require('path')

module.exports = {
	entry: './app/main.js',
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'js/script.js',
	},
	module: {
		rules: [
			{
				test: /\.scss$/i,
				exclude: /node_modules/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: { url: false },
					},
					'sass-loader',
				],
			},
		],
	},
}

sass をビルドする時に css ファイルとして出力する

インストール

MiniCssExtractPlugin - webpack

$ npm install mini-css-extract-plugin --save-dev

アンインストール

使わないパッケージが存在していることを気にする人はアンインストール。

$ npm uninstall style-loader --save-dev

app/main.js

import style from './sass/style.scss'

webpack.config.js

public/css に style.css として出力する。

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	entry: './app/main.js',
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'js/script.js',
	},
	module: {
		rules: [
			{
				test: /\.scss$/i,
				exclude: /node_modules/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							url: false,
						},
					},
					{
						loader: 'sass-loader',
						options: {},
					},
				],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'css/style.css',
		}),
	],
}

Autoprefixer について

pastcss-loader#autoprefixer - webpack

pastcss-loader のプラグインに autoprefixer がある。
インストールしなくてもベンダープレフィックスをある程度つけてくれるので割愛。

Minify について

ビルドする時にモードを production に指定した場合に自動的に minify される。

$ webpack --mode=production

モードが development の場合は minify されずにビルドされる。

$ webpack --mode=development

関連投稿