問題タブ [postcss]

私がやりたいことは、css を監視して自動プレフィックスできるツールを用意することだけです。以前はpleeease.ioを使用していましたが、私のような初心者にとっては非常に簡単です.npmを介してインストールした後、オプションファイル（.pleeeaserc）を作成してから実行する必要があります

その後、CSS に集中できます。CSS ファイルに変更を加えるたびに、処理されて出力されます。

残念ながら、私がそうするとき、作者はそれを維持するのをやめたようです

新しいサーバーで多くのエラーが発生し、インストールに失敗しました。

autoprefixer を直接使用する方法を学ぶ時が来たと思います。これは、依存関係の 1 つとして統合されていると思います。

ただし、学習曲線は私には少し多すぎることがわかりました。autoprefixer を使用するには、PostCSS を学ぶ必要があります。PostCSS は通常、Grunt または Gulp で実行されます。タスク ランナーを使用するには、npm と node.js についてある程度知っておく必要があります。これらはすべて、多くの時間を節約できる便利なツールであることを知っています。それらを使用すると、自動接頭辞以上のことができます。後で詳しく説明しますが、現在のプレッシャーの下では、PostCSS に関するすべてのドキュメントや記事を消化することなく、オートプレフィックスを起動して実行するために、pleeease のようなショートカットが本当に必要です。次のようなことができるといいのですが

私のscssフォルダーの下にあり、に変更を加えて保存するたびにinput.scss、output.scssファイルが生成されます。

そこで、PostCSS を学習したり、オートプレフィクサーの作業をできるだけ簡単にしたりするための努力の一環として、いくつか質問があります。

PostCSS1) 明確にするために、との関係は何PostCSS-cliですか? 後者は前者に依存しているか、または前者を含んでいますか?

postcss2) 後者をインストールすると、コマンドライン インターフェイスでコマンドを使用できるようになるだけですか?

3) コマンドを実行しnpm install -g postcss-cliたのにまだpostcssコマンドを使用できません。何が間違っていましたか?

4) ファイルの変更を監視して自動的にコンパイルするには、Grunt や Gulp などのタスク ランナーを PostCSS と共に使用する必要がありますか?

npm install postcss5)との違いは何npm install grunt-postcssですか?

PostCSS を Webpack だけで使い始めたところです。外部スタイルシートをインライン化するために使用する場合postcss-import、インポートされたソースに適用されるプラグインとトランスフォーマーを構成できるオプションがあることがわかりますが、これがメインの PostCSS ランナー用に構成された他のオプションとどのように適合するかについて少し混乱しています。

たとえば、URL をインライン化したい場合、postcss-urlプラグインをpostcss-import、PostCSS ランナー、またはその両方に追加する必要がありますか (メインのスタイルシートにも URL 参照がある場合)?

ドキュメントがないようで、 Github ページのコード例がよくわかりません。

出力 CSS ファイルにリセット ルールが自動的に追加されると想定しました。ドキュメントでは次のような.blockものを使用していますが、それらが何のために使用されているかは述べていません。

次の意味は何ですか？

これは通常のCSSですか？私は--modifier前に見たことがない。通常の CSS ファイルのデフォルトをオーバーライドできるため、通常の CSS の場合、このプラグインの目的は何ですか。私はそれをしなければならないことを避けようとしています。

目的は何ですか：

• PostCSS 自動リセット
• PostCSS初期

ドキュメントは両方とも非常にまばらで、なぜそれらを使用する必要があるのか​​ 、その目的は何なのかを実際に説明していません.

自動リセットを試しました。all: initialスタイルを設定するすべての要素に配置されているようです。出力を見ると、これは非常に無駄に思えます。

それはどのように違うのですか:

自動リセットのコードを見ると、まさにそれを行っているようです: https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

これが使用するよりも優れている理由がわかりません*

これは私の現在の webpack 構成です – https://gist.github.com/lavezzi1/1179d91c584c0b0a7544c862c8bb07ca

ご覧のとおり、私はマルチページ アプリを使用しており、いくつかの問題に直面しています。

1. ページごとに 2 つのファイルをコンパイルしたいと考えています。どうすればそれができますか？CommonChunks プラグインを試しましたが、css ではなく common.js ファイルのみが生成されます。各ページのエントリ js ファイルに main.css ファイルを直接インポートするだけです。しかし、それは以下に説明する別の問題を引き起こします。

2. プリプロセッサなしで postcss を使用したい。出来ますか？main.css を js ファイルに直接インポートすると、postcss プラグインが機能しません (コードがコンパイルされません) *.vue ファイル内で正常に機能する postcss-nested プラグインをテストしました。それを修正する方法は？

私はそれにとてもこだわっています。お役に立てば幸いです。ありがとう！

NPM を使用してタスクランナーを作成しています — Gulp や Grunt を使用したくありません...遅い! タスクランナーが動いていて速い！しかし...オートプレフィクサーはプレフィックスを付けていません。持っている console.logs もターミナルに表示されません。解雇されていないようです。autoPrefix()SCSS が CSS にコンパイルされた後に呼び出される関数で呼び出しています。

そのファイルに指示するスクリプト オブジェクト タスクを含む package.json にstart.js は、次のコードがあります。

私は何を間違っていますか？ここの例のようにコーディングしています: https://github.com/postcss/autoprefixer#javascript

プロジェクトで webpack と postcss-import を使用しています。私はコンポーネントを作成し、一部のコンポーネントは別のコンポーネントにネストできるため、それらのパスなどを記述するのは複雑import '../../../component-a';です。この問題を解決するためにエイリアスを作成したいと思います。だから私のwebpack.config.jsに書いた：

ルートにある私のwebpack構成。だから、問題は私が css のようなものを書くときです@import '@styles/vars.css';– それは動作しません. 「undefined variable bla bla bla...」というエラーが表示されます。しかし、js ファイル内にブロックをインポートして書き込むと、import Logo from '@blocks/logo';問題なく動作します。@import '@styles/vars.css';また、スタイラスで動作することにも注意してください。したがって、postcss-import プラグインについて何か見逃している可能性があります。それを機能させる方法は？

UPD postcss 構成部分:

```

```

ポスト css ファイルをロードする webpack によって生成される警告を抑制するにはどうすればよいですか?

警告の例:

私のwebpack構成: