ブログにPostCSSを導入した

ブログにPostCSSを導入した

😎 PostCSS導入した

ブログの最初の記事を書いたときに宣言していた下記の二つを行なった。

・style.cssを分割する。
・分割する時はPostCSSを利用する

ディレクトリ構造は以下のような形。

.
├── static
│     ├── css
│     ├── app.css
│     ├── components
│     │   ├── button.pcss
│     │   ├── highlight.pcss
│     │   ├── list.pcss
│     │   ├── pagination.pcss
│     │   ├── tag.pcss
│     │   └── widget.pcss
│     ├── foundations
│     │   ├── base.pcss
│     │   └── reset.pcss
│     ├── layouts
│     │   ├── container.pcss
│     │   ├── footer.pcss
│     │   └── header.pcss
│     ├── pages
│     │   └── post.pcss
│     ├── style.css
│     └── utils
│         ├── color.pcss
│         ├── font.pcss
│         ├── media.pcss
          └── syntax.pcss


package.jsonは以下のようなかんじ。

{
  "name": "blog.FOOTPRINT.me",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/foo7print/blog.FOOTPRINT.git",
  "author": "foo7print",
  "license": "MIT",
  "scripts": {
    "build:postcss": "postcss ./static/css/app.css -o ./static/css/style.css",
    "build:webpack": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^8.5.2",
    "cssnano": "^3.10.0",
    "postcss-cli": "^5.0.0",
    "postcss-custom-media": "^6.0.0",
    "postcss-custom-properties": "^7.0.0",
    "postcss-flexbugs-fixes": "^3.3.1",
    "postcss-nested": "^3.0.0",
    "postcss-normalize": "^4.0.0",
    "postcss-smart-import": "^0.7.6",
    "postcss-sorting": "^3.1.0",
    "stylelint": "^9.2.1",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1"
  }
}


postcss.config.jsは下記のようなかんじ。

module.exports = {
  plugins: [
    require('postcss-smart-import')({
      plugins: [
        require('stylelint')
      ]
    }),
    require('autoprefixer')(),
    require('cssnano')(),
    require('postcss-custom-media')(),
    require('postcss-custom-properties')(),
    require('postcss-flexbugs-fixes')(),
    require('postcss-nested')(),
    require('postcss-normalize'),
    require('postcss-sorting')({
      browsers: 'last 2 versions'
    }),
  ]
}

参考


🌝 コードハイライトChromaも導入した

pygmentsCodeFencesGuessSyntax = true


参考