menu-icon

purecss-sass (Pure CSS for Sass) を導入する

purecss-sassという軽量CSSフレームワークPureのSassを見つけたので、Webpackを使うパターンの導入方法をメモしておきます。

purecss-sassについて

CSSフレームワーク Pureはこのブログでも何度か触れています。purecss-sassはPureのSassになります。公式提供ではなくPureのCSSから変換して作成されており、変数を使用してのカスタマイズとかはないみたいです。

rubysamurai/purecss-sass

導入方法

導入の検証に使用した環境です。

  • Ubuntu 20.04
  • Node.js 12.18.3
  • npm 6.14.6

今回のプロジェクトの初期のディレクトリ構造は以下とします。

public/    # 公開ディレクトリ
src/       # ソース用
package.json
package-lock.json

htmlの準備

確認用の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&#x27;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つにまとめることができます。