Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
25
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@axcelwork@github

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:

続きます。

25
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
25
Help us understand the problem. What is going on with this article?