purecss-sassという軽量CSSフレームワークPureのSassを見つけたので、Webpackを使うパターンの導入方法をメモしておきます。
purecss-sassについて
CSSフレームワーク Pureはこのブログでも何度か触れています。purecss-sassはPureのSassになります。公式提供ではなくPureのCSSから変換して作成されており、変数を使用してのカスタマイズとかはないみたいです。
導入方法
導入の検証に使用した環境です。
- Ubuntu 20.04
- Node.js 12.18.3
- npm 6.14.6
今回のプロジェクトの初期のディレクトリ構造は以下とします。
public/ # 公開ディレクトリ
src/ # ソース用
package.json
package-lock.jsonhtmlの準備
確認用のhtmlを用意します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Examples - Pure</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<section>
<div class="container">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Multi-Column Form</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-first-name">First Name</label>
<input type="text" id="multi-first-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-last-name">Last Name</label>
<input type="text" id="multi-last-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-email">E-Mail</label>
<input type="email" id="multi-email" class="pure-u-23-24" required="" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-city">City</label>
<input type="text" id="multi-city" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-state">State</label>
<select id="multi-state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="multi-terms" class="pure-checkbox">
<input type="checkbox" id="multi-terms" /> I've read the terms and conditions</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</div>
</section>
</body>
</html>現時点での表示を確認します。
見づらいですね。。。
パッケージのインストール
以下のコマンドを実行してインストールします。
$ npm install --save-dev \
css-loader \
mini-css-extract-plugin \
node-sass \
optimize-css-assets-webpack-plugin \
purecss-sass \
sass-loader \
style-loader \
terser-webpack-plugin \
webpack \
webpack-cli terser-webpack-pluginですがjsのminify用で、jsを読み込まない今回のサンプルでは不要です。ただ、実際にはjsも使う場合が多いはずなので、ついでに設定していきます。
webpackの設定
プロジェクトルートに以下のwebpack.config.jsを作成します。
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/app.js'
},
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: [
'default',
{
discardComments: { removeAll: true }
}
],
}
})
],
},
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/style.css'
}),
]
};ソースの準備
ビルドされるソースを用意します。
Sass
以下のsrc/sass/style.scssを作成します。必要に応じてimportするファイルを変更できるのが良いですね。
@charset "utf-8";
@import '~purecss-sass/vendor/assets/stylesheets/purecss/base';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/buttons';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/forms';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/grids';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/grids-responsive';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/menus';
@import '~purecss-sass/vendor/assets/stylesheets/purecss/tables';
section {
padding: 3rem 2rem;
.container {
max-width: 800px;
margin: 0 auto;
}
}JS
次にメインとなるsrc/index.jsを作成します。といっても以下の1行です。
require('./sass/style.scss');ここまででプロジェクトのディレクトリ構造は、以下のようになっているはずです。
node_modules/
public/
index.html
src/
index.js
sass/
style.scss
package.json
package-lock.jsonビルドする
ビルド用のコマンドを準備します。package.jsonのscriptsに以下を追加します（今回はdev環境用の設定は用意しないです）。
"build": "webpack --mode production"参考までにpackage.jsonのサンプルも載せておきます。
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production"
},
"author": "",
"license": "MIT",
"devDependencies": {
"css-loader": "^4.1.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"purecss-sass": "^2.0.3",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.8",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}準備できたら、以下でビルドします。
$ npm run buildこれでpublicディレクトリ下にjs/app.js, css/style.cssが生成されるはずです（今回のサンプルではjs/app.jsは読み込みません）。
表示を確認してみます。
きれいなフォームが表示されました。
まとめ
Webpackを使ってpurecss-sassを導入できました。これでPureの中で使わないものを削りつつ、CSSファイルを1つにまとめることができます。