LoginSignup
8

More than 5 years have passed since last update.

Feltにプラグインを追加してPostCSSを使う方法

Last updated at Posted at 2016-07-28

基礎知識

Feltとは?

Feltは、CSSとJavaScriptのバンドル機能を持った、ローカルで動作するWebサーバです。
ES6とPostCSSで記述すると、内部で処理してくれるので、複雑な環境を用意しなくても、サクッと表示確認することができます。

私は、ES6はまだちゃんと使ったことがなかったので、とりあえずPostCSSのみで試してみましたが、その際のやり方を備忘録として残しておきます。

※Felt自体の解説は、下記エントリーを参考にしてください。

PostCSSとは?

PostCSSとは、多種多様なプラグインを用いてCSSファイルを変換するポストプロセッサーです。
gulp等で利用されることも多いかと思いますが、基本的にはそれ単体で使用するものではなく、適宜必要なPostCSSプラグインと連携しながら使うスタイルが一般的です。

最小構成でPostCSSを使う場合

以下のコマンドを実行するだけでOK。(※要node v6.x)

$ npm install -g felt felt-recipe-minimal  
$ cd path/to/project/  
$ felt  

http://localhost:3000/にアクセスすると、コンパイル済みの状態でサイトを閲覧することができます。

ファイル構成例

今回はCSSの変換のみなので、以下のようなファイル構成を想定しています。

  • project/
    • index.html
    • css/
      • style.css
    • cache/(Felt実行時に自動的に生成)

補足&注意点

  • 上記のやり方の場合、最小構成のレシピ(felt-recipe-minimal)を使う形になります。
  • デフォルトでは、PostCSSプラグインのうち、postcss-cssnextpostcss-importの機能のみ使用できるようです。

PostCSSプラグインを追加する場合

レシピに入っていないプラグインを使用するには、コンフィグ(設定)ファイルを作成して、プラグインを個別にインストールする必要があります。
以下の手順に従って設定すれば、自分の好きなプラグインを追加することができます。

1.コンフィグファイルの作成

プロジェクト直下にコンフィグファイル(felt.config.js)を設置して、使用したいプラグインを追記します。

例えば、postcss-nested、postcss-simple-vars、postcss-mixinsの3つを追加で利用したい場合は、以下のように記述します。

felt.config.js
const
  postcss = require('felt-postcss'),
  postcssImport = require('postcss-import'),
  postcssNested = require('postcss-nested'),
  postcssSimpleVars = require('postcss-simple-vars'),
  postcssMixins = require('postcss-mixins'),
  cssnext = require('postcss-cssnext')

module.exports = {
  handlers: {
    '.css': postcss({
      plugins: [
        postcssImport(),
        postcssMixins(),
        postcssSimpleVars(),
        postcssNested(),
        cssnext()
      ],
      options: {
        map: { inline: false }
      }
    })
  }
}

コンフィグファイルの注意点

  • コンフィグファイルの書式は公式レシピと一緒なので、詳しい書き方はfelt-recipe-minimalなどを参考にしてください。
  • コンフィグファイルの設定は、レシピの差分として認識されるわけではないので、必要なパッケージ/プラグインは全て記述する必要があります。(PostCSSを使う場合は、felt-postcssだけは必ず必要です)

2.プラグインのインストール

コンフィグファイルを用いてFeltを利用する場合、依存するパッケージ/プラグインはローカルにインストールする必要があるので、別途npmでインストールを行います。

今回はpackage.jsonに以下のように記述して、npm installコマンドを実行しました。

package.json
{
  "name": "felt-postcss-selection",
  "version": "1.0.0",
  "description": "PostCSS selection for Felt",
  "main": "felt.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yusuke Takahashi",
  "license": "MIT",
  "dependencies": {
    "postcss-cssnext": "^2.7.0",
    "felt-postcss": "^0.1.0",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^5.0.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}

3.Feltの実行

以下のコマンドにより、コンフィグファイルを指定してFeltを実行します。

$ felt --config felt.config.js

すると、先ほどと同じように、http://localhost:3000/でコンパイルされた状態で閲覧することができます。

cache/以下に生成されているCSSファイルを見れば、追加されたプラグインの機能のみ、変換が実行されているのを確認できるでしょう。

ファイル構成例

felt.config.jspackage.jsonを新規で作成したため、ファイル構成としては以下のような形になりました。

  • project/
    • index.html
    • css/
      • style.css
    • cache/(Felt実行時に自動的に生成)
    • node_modules/(追加モジュールを格納)
    • felt.config.js
    • package.json

まとめ

最小構成のレシピ(felt-recipe-minimal)では、PostCSSの一部の機能しか使用できませんが、コンフィグファイルを用いて設定することで、自分の好きなPostCSSプラグインを追加することができます。

ただし、コンフィグファイルを使用する場合は、プラグインを個別にインストールする必要があるので、package.jsonを用いてプロジェクト毎にプラグインを管理すると良いでしょう。

サンプル

今回の解説で使用したPostCSS用のサンプルファイル一式をGitHubに公開しています。
こちらをローカルにcloneして実行すれば、実際にFeltでPostCSSを利用する流れが体験できるので、参考にしてみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8