問題タブ [postcss]

今はプラグインを使っているだけprecssですが、PostCSSで変数をこのように計算したいです

+postCSSで計算するためのプラグインはありますか?

私も試しcalc($sidebar-width + $container-padding-left);ましたがうまくいきません。

https://github.com/postcss/postcss/blob/master/docs/plugins.mdを調べました が、欲しいものが見つかりませんでした。

Webpack を postcss-loader と組み合わせて、インポートされた css ファイルを監視するのに少し問題があります。それらは最初の実行で処理されていますが、これらのファイルを変更しても webpack は再コンパイルされません。

例えば

すべての css モジュールをインポートするメインの css ファイルがあります。

ベースインポートでは、例のためにボディに色を適用しました:

cssファイルがリロードされているかどうかをデバッグするために、背景を別の色に設定しましたが、そうではありません。

これは私のwebpack構成です:

autoprefixer で grunt-postcss を使用しようとしていますが、css にプレフィックスが付けられません。Autoprefixer は新しいファイルを作成しますが、プレフィックスは付けません。エラーはありません。

ここに私のうなり声があります：

どうしたの？

autoprefixer を実行している postcss とコードに不満があります。

...出力しています：

しかし、これを出力するべきではありませんか？

私のpostcss設定は次のとおりです。

何か間違ったことをしているのか、間違って出力しているのか、それとも実際に正しいのか、私にはわかりません。

ありがとう

Webpack をセットアップするのはこれが初めてなので、ここで何かが欠けていると確信しています。

ExtractTextPlugin を使用して css ファイルを「dist」に生成し、PostCSS ファイルを Webpack でロードしようとしています。問題は、Webpack が css ファイルを取得していないように見えることです。それらは「クライアント/スタイル」の下にありますが、「共有」に移動しようとしましたが、同じ結果になりました。

--display-modules オプションを指定して Webpack を実行し、css ファイルが表示されないことを確認しました。

テキスト抽出プラグインなしで実行してみましたが、結果は同じで、bundle.js に CSS が組み込まれていません。

これが私の製品構成です：

そして、これが私のメイン css ファイルの例です: @import 'normalize.css/normalize';

なぜこれが起こっているのか誰にも分かりますか？何か不足していますか？

ありがとうございました

ソース マップを、CSS ディレクトリに対して相対的なサブ ディレクトリに配置したい。

私のbase.cssのソースマップコメント付き

Google でドキュメントを読むと、ソース マップには単に相対パス (CSS ディレクトリからの相対パスを想定しています) が必要であるという印象を受けますが、この URL を読み取ることができるブラウザはないようです。何が間違っているのでしょうか?

私は PostCSS を使用していますが、私のコードは次のとおりです。

に組み込まれている CSS モジュールのサポートは非​​常にwebpackシンプルに見えます: requireCSSimportファイルと webpack は、次の 2 つのことを行うコードを生成するだけです。

• 生成された CSS を Web ページに挿入します
• 使用するクラス名の辞書を返します。

また、使用方法も非常に簡単です。

別の CSS モジュールの実装であるプラグインをテストしたいと思います。PostCSSこれは、他のPostCSSプラグイン、特にautoprefixer. しかし、公式ドキュメントによると、 CSS モジュールとはpostcss-modules動作が大きく異なるようです。webpackドキュメントには使用例がなく、生成するいくつかのコールバック コードのみがありますJSON。上記のサンプルコードと同じ目標を達成するために実際に使用されている例はありますか?

現在 webpack を使用しており、open sans の読み込みが機能していません。すべてが機能するために .css ファイルである必要がありますか?

webpack構成

css ファイルのセット (react コンポーネントごとに 1 つ) を持つプロジェクトがあります。私は、webpack と postcss-cssnext で css-loader (モジュールをオン) を使用しています。

variables.css理想的には、css ファイル間で変数を共有できるように単一が必要です。私はvariables.css次のようなものを含めてみました:

それをインポートして、cssローダーを通過します。問題は、他のファイルがこれらの変数を取得しないため、これが機能しないか、何か間違っていることです (これをコンポーネント css ファイルに直接含めると機能します)。

機能することの 1 つはstyles.json、次の webpack セットアップを含むファイルを用意することです。

ただし、これに関する主な問題は、変数を変更するたびに、webpack dev サーバーを再起動する必要があることです (したがって、webpack 構成をリロードします)。これは理想的ではありません。

それで、これを行うためのより良い方法について何か考えはありますか？