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;
}

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年5月
 1
2345678
9101112131415
16171819202122
23242526272829
3031