26
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

npm-scriptでPostCSS

Gulp も Webpack も疲れたよ…。
そんな感じなので現在、npm-scriptでフロントエンドの環境構築を進めています。

全体の目次

  • PostCSS編
  • HTML編
  • Javascript編

こんな感じでどんどん書いていければいいと思います。

PostCSSの環境構築

まずは、postcss-cliをインストール

公式ドキュメントは以下
npm - PostCSS CLI
github - postcss/postcss-cli

npm install -D postcss-cli

これで基本的な設定は完了。
そして、package.jsonscripts節で下記を設定する。

package.json
"scripts": {
    "css": "postcss <元となるディレクトリ> --dir <出力ディレクトリ>"
}

そして、コマンド実行。

npm run css

これで、ひとまずは出力されるはず。

階層構造を維持して出力

公式ドキュメント見ても使い方がわからず、結構ググったけど中々出てこなかった。
けど、本家のissueを眺めてると使い方がありました。:relaxed:

package.json
"scripts": {
    "css": "postcss <元となるディレクトリ> --base <ベースとなるディレクトリ> --dir <出力ディレクトリ>"
}

僕の環境の場合は以下で出力されました。

package.json
"scripts": {
    "css": "postcss resources/css/src --base ./resources/css/src --dir htdocs"
},

autoprefixer

まずはインストール。

npm install -D autoprefixer

v3以降からプラグイン等々の設定が変わったみたいです。
開発ディレクトリのルートに postcss.config.js ファイルを作成し、下記を追加。

postcss.config.js
module.exports = () => ({
  plugins: {
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

やったね。:relaxed:

css-import

まずはインストール。

npm install -D postcss-import

postcss.config.js ファイルを下記のような形にする。
'postcss-import': {}を追加)

postcss.config.js
module.exports = () => ({
  plugins: {
    'postcss-import': {}
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

package.jsonでは、インポートするファイルは除外設定をしてあげましょう。
今回の例で言うとディレクトリ名に _(アンダースコア)が入っているものは除外という設定です。

package.json
"css": "postcss resources/css/src/**/[^_]* --base ./resources/css/src --dir htdocs"

CSS側では下記のように importしてあげればOK。

test.css
@charset "utf-8";

@import './_c/style_pc.css';

h1 {
  display: flex;
}

やったね。:relaxed:

ネストとか変数とか

はい、インストール。

npm install -D precss
npm install -D postcss-mixins

設定ファイルは追記する順番に注意します。

postcss.config.js
module.exports = () => ({
  plugins: {
    'postcss-import': {},
    'postcss-mixins': {},
    'precss': {},
    'autoprefixer': {
      "browsers": "last 2 versions"
    }
  }
})

やったね。:relaxed:

続きます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
26
Help us understand the problem. What are the problem?