PostCSSでCSSファイルを分割する

PostCSSのpostcss-importを使って、CSSファイルを分割できるようにしてみます。

設定方法

postcss-cliの環境を用意して、postcss-importをインストールします。

npm install postcss-import --save-dev

postcss-importが使用できるように設定ファイルを追加します。

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import')()
  ]
}

devディレクトリを作成して、結合元と結合するファイルを追加します。
input.cssは結合元のファイルで、「@import ～」の形で結合するCSSを指定します。

input.css

@import "base";
@import "top";

以下2ファイルは結合するCSSです。

base.css

body {
  margin: 0;
}

top.css

.top {
  color: red;
}

下記コマンドを実行します。

node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css

publicディレクトリ以下に結合された下記ファイルが生成されました。

output.css

body {
  margin: 0;
}
.top {
  color: red;
}

【参考サイト】

• @brn/postcss-import – npm