軽量CSSフレームワークのmini.cssを使ってみた

レスポンシブ対応ウェブサイトを作る際に、全て自分でCSSを設計するのは面倒なので、適当なフレームワークを使うことが多いです。これまではbootstrapばかり使ってきましたが、せっかくなので別のCSSフレームワークを使ってみることにしました。

https://minicss.org/

minicss.org

bootstrapに比べると機能は最低限ですが、その分だけ軽量です。簡素なウェブサイト向きでしょう。

CDNもあるようですが、今回はダウンロードしてwebpackで圧縮した状態で使うことにします。

準備

インストール

$ npm install mini.css
$ npm i -D webpack webpack-cli sass-loader sass style-loader css-loader

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "demo theme",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development",
    "watch:dev": "webpack --mode=development --watch"
  },
  "author": "user",
  "license": "UNLICENSED",
  "dependencies": {
    "mini.css": "^3.0.1"
  },
  "devDependencies": {
    "css-loader": "^5.0.1",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    // linkタグに出力する機能
                    "style-loader",
                    // CSSをバンドルするための機能
                    {
                        loader: 'css-loader',
                        options: {
                            url: false // URLの解決を無効にする
                        }
                    },
                    'sass-loader',
                ]
            },
        ],
    },
    // ES5(IE11等)向けの指定（webpack 5以上で必要）
    target: ["web", "es5"],
};

src/index.js

/* Mini.css */
import "./scss/mini.scss";

/* My CSS */
import "./scss/common.scss"; //sample
import "./scss/home.scss"; //sample

/* My JS */
import './js/console'; //sample

src/scss/mini.sccs

/* インストールしたmini.cssのsassを読み込む（sassは複数の種別が用意されている） */
@import "~mini.css/src/flavors/mini-default.scss";

src/scss/common.scss

/* mini.cssの設定を上書きする（ここから） */
* {
    font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;       
}
/* mini.cssの設定を上書きする（ここまで） */
/* 以下、共通CSSを書く */

src/scss/home.scss

/* トップページ用CSS */
body.home{
}

HTML

dist/index.html

<script src="./bundle.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6"></div>
    <div class="col-sm-12 col-md-6"></div>
  </div>
</div>

ビルド

上から、本番ビルド・開発ビルド・開発ビルド＆自動ビルド

$ npm run build
$ npm run dev
$ npm run watch:dev