問題タブ [postcss]

I'm giving postCSS a go by pure curiosity but I'm having a compilation time around ~2sec already.

I'm only using 3 plugins : autoprefixer, postcss-import and postcss-nested

I've got app.css that imports 2 files :

then I have _base.css :

and _common.css :

My watcher is only watching /postCSS :

postcss:dev task:

So my question is, how can I already get 2 seconds to compile 3 small css files ? Am I missing something ?

Thanks!

grunt-postcss と autoprefixer プラグインをインストールしましたが、プラグイン「load-grunt-config」のメソッドで PostCSS を設定しようとすると、Autoprefixer やその他のプラグインは何もせず、アラートもエラーも発生しません。

これはコンソールからの出力です:

標準的な方法で grunt を設定すると、PostCSS は正しく動作します。

これは私の postcss.js ファイルで、grunt フォルダー内に配置されています。

代わりに、このコマンドgrunt postcss --debugを使用すると、コンソールに次のように表示されます。

または、このコマンド ライン$grunt postcss --verboseを実行すると、コンソールに次のように表示されます。

あなたはそれを解決する方法がわかりません

ご協力いただきありがとうございます

マリオ

PostCSS で Ruby sass を使用しています。これは私のgulp cssタスクです。

私が得ているエラー

webpack 内で OptimiseCssAssetsPlugin を使用しようとしていますが、導入すると、まだ生成されているように見える css sourcemap が chrome 内で使用できなくなります。

私のwebpack.config.jsは次のとおりです

これについてのご意見は大歓迎です。

このビルド スクリプトは実行されているようですが、出力される CSS は縮小されていないか、自動プレフィックスが付けられていません。SASS をコンパイルしてから、Broccoli と angular-cli を使用して Post CSS を介して出力を実行しようとしています。一部の ember-cli の人々も同様に役立つと思います。私は何を間違っていますか？

ビルドはこれをターミナルに出力します：

ただし、CSS は Post CSS ではなく SASS から出力されたものと同じです。

ここに私の angular-cli-build.js があります:

PostCSS autoprefixer に wepback ローダーとプラグインを使用しようとしています。すべての SCSS はコンパイルされていますが、プレフィックスが付けられていません。

これは私の設定にあるものです：

何が欠けていますか。

フレックスボックスを使用した場所があり、接頭辞が付けられていません

postCSS でLost Gridを使用しようとしており、次のコードが機能しない理由を理解しようとしています。

HTML

CSS

私は見ることを期待しています。

しかし、これは結果です。

コード ペンもセットアップしました。

http://codepen.io/alexc101/pen/mEJQaR?editors=110

ここでコードが何をしているのか、そして最初の図に見られる望ましい効果を達成するための適切な方法は何かを理解しようとしています.

それがすべて理にかなっていることを願って、

ありがとう

私はプロジェクトにhttps://github.com/mxstbr/react-boilerplateを使用しています。これはスタイルに CSS モジュールと postCSS を使用しています。これは素晴らしいことです。ただし、タイポグラフィ、基本コンポーネントなどのグローバル CSS ファイルもいくつか必要です。これらを追加する方法のベスト プラクティスは何ですか? preCSSの使用を検討しましたが、これらのグローバル ファイルをメイン スタイルシートにインポートできるように、webpack 内で設定する方法が完全にはわかりません。私はwebpackが初めてなので（Sassを使用してGulp / Gruntのバックグラウンドから来ました）、ここで何か助けていただければ幸いです。

これらのファイルで定義されている変数とミックスインを CSS モジュール ファイルで使用できれば素晴らしいと思いますが、これが可能かどうか、または推奨されるかどうかは不明です。CSS モジュール ファイルの参照とグローバル CSS クラスの参照に使用できるように、react-css-modulesをインストールしました。styleNameclassName

属性があることは知っていますが、エラー クラスcomposes: class from '/path/to/file.css';など、さまざまなユーティリティ クラスが定義されているいくつかのグローバル ファイルが必要ですclearfix。したがって、 を使用するreact-css-modulesと、次のようになります。 <div className="clearfix" styleName="app-header">{...}</div>

繰り返しますが、これが正しいかどうかはわかりません。

私はオープンソース プロジェクトに取り組んでいるので、ベスト プラクティスに固執し、可能な限り最善の方法でそれを実行したいと考えています。アドバイスをありがとう！