postcss-importでCSSモジュールを取り込む

2016-06-12 sasa+1

Blob Blame History

postcss-importでnpmからインストールしたCSSのモジュールをインポートできると知ったので試した。

まずpostcssなどのモジュールをインストールする。

同時にnormalize.cssをインポートするモジュールとしてインストールする。

$ npm install postcss postcss-cli postcss-import normalize.css

次にpostcss.jsonとして設定ファイルを作成する。

{
  "use": [
    "postcss-import"
  ],
  "input": "index.scss",
  "output": "index.css",
  "local-plugins": true
}

index.scssとして以下のような内容のファイルを作成する。

@import "normalize.css";

これでindex.scssにnormalize.cssがインポートされてコンパイルされる。

コンパイルする。

$ ./node_modules/.bin/postcss --config postcss.json

コンパイルされたファイルを見ると、normalize.cssがインポートされていることがわかる。

$ head index.css
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */

normalize.cssの他にanimate.cssもインポートできたので、package.jsonのmainにCSSが指定されていればどんなモジュールでもインポートできると思う。

CSSのモジュール別の管理にはとても良いと思った。