問題タブ [postcss]

私はcss モジュールとpost-cssを使用しています。post-css-simple-varsプラグインを追加しました

色.css

私のbutton.cssファイルで、構成を使用して変数を再利用するにはどうすればよいcolors.cssですか?

ボタン.css

CSS Modulesを使用して、スタイル宣言を複製せずにグローバル ユーティリティ クラスを複数の要素に適用するにはどうすればよいですか?

たとえば、これは CSS モジュールのない React コンポーネントです。関連する行は、次のdiv2 つのクラスを持つ です: widgetand clearfix...

.clearfixアプリ全体の多くの要素に適用したいグローバル ユーティリティ クラスです。

CSS モジュールにインポートするさまざまな方法を見てきまし.clearfixたが、いずれの場合も、クラスが適用されるたびにスタイル宣言が再定義されます。一例を次に示します。

私はgulpfile.jsで以下を実行しています

gulp スタイルを実行した後、これを出力します

style.css ファイルを確認すると、空です。何が間違っているのかわかりません。sass -trace --watch style.scss:style.css を実行しましたが、問題なく動作しました。私はここで何をすべきか途方に暮れていますか？

ありがとうございました

初めて autoprefixer を使用しようとしていますが、タスクがハングアップし、エラー出力がないため、デバッグが非常に困難です。

autoprefixer github pageの指示に従ってインストールgrunt-postcssしました。autoprefixer

これは私のpackage.jsonに追加され"autoprefixer": "^6.2.2"、"grunt-postcss": "^0.7.1"

私の Gruntfile.js は次のようになります。

非常にシンプルで簡単なセットアップのように見えますが、前述したようにgrunt postcss、プロセスを実行するたびにフィードバックがなくハングします。

行.postcssへの追加、アンインストール、インストールなどを試しました（ただし、これはハングするだけでなく、非推奨であるとも言われました...）、設定をいじってみました...しかし、何も改善されませんでした。常にハングアップし、何も起こりません。requireautoprefixerautoprefixer-core

これが機能するようになると、プロジェクトで必須になると思うので、どんな助けでも大歓迎です;）

初めて autoprefixer で grunt-postcss を使用しようとしていますが、css にプレフィックスが付けられません。私はメッセージを受け取ります

しかし、何も接頭辞が付けられていません。

問題が私のcssではないことを確認するためにtest.css、

ブラウザのさまざまな組み合わせを追加して、プレフィックスをトリガーしようとしましたが、役に立ちませんでした。

現在のタスクは次のようになります。

タスクは次のように登録されます。

行に ' .postcss ' を追加しrequireても何の効果もありません (私はこれがあちこちで使用されているのを見てきました)。files

「プレフィックス付き」フォルダーを削除して grunt を実行すると、フォルダーが作成され、新しいファイルがそこにあり、プレフィックスがまったく付けられません。

これはバグですか？私は何か間違ったことをしていますか？

前もって感謝します！:)

Sass から postCSS に移行しようとしていて、postcss-simple-vars gulp プラグインをテストしています。

.scss ファイルで自動的に JavaScript スタイルのコメント (//) を使用する Webstorm IDE を使用しているため、非ブロック コメントはすべて // コメントであり、/* */ ではありません。

postcss-simple-vars は、サイレント オプションが true に設定されていても、すべての // コメントでエラーをスローします。

これが私の一気飲みの仕事です：

本当に明らかな何かが欠けていますか？postcss-simple-vars に // スタイルのコメントを無視させる方法はありますか?

解決方法:

すべての // コメントを /* */ コメントに置き換えて、gulp-replace ($.replace) に置き換えました。

PostCSSのプラグインの作成に問題があります。

私がやりたいことを理解するには、次のコードを見てください。

これが私がやりたいことです。

button-border が設定されていない場合、次のデフォルト値が必要です。

ただし、button-border が設定されている場合は、button-border に設定されている値を使用したいと思います。上記の例では、次のようになります。

変数を設定してやろうと思ったのですが、スコープに問題があると思います。これが私が試したコードです：

私が間違っていることと、どうすれば正しくできるかについての考えはありますか?

ありがとう、

モシェ

postcss-bem を使用して bem スタイルで css ファイルを生成する方法を学んでいますが、CSS-Modules や Postcss-JS のようなパッケージがあり、以下のようなことを行うために使用できるのではないかと思います:

CSS-Modules と Postcss-JS のドキュメントでこの機能を見つけましたが、postcss-JS で webpack の postcss-loader を使用して postcss-bem.css を解析しようとすると、

ローダー: ["style-loader","css-loader","postcss-loader?parser=postcss-js"]

しかし、私はこのようなエラーを得ました

モジュールのビルドに失敗しました: SyntaxError: Unexpected token ILLEGAL

私はそれを間違っていますか？

私はNode.js を使用し、CSS にポスト プロセッサを使用することに非常に慣れていません。いくつかの記事を読んだ後、次のものをインストールできました。

1. Node.js (npm を含む)
2. ゴクゴク
3. PostCSS
4. Pxtorem (Gulp の PostCSS プラグイン)

私がやりたいのは、「pxtorem」プラグインを使用して、次の CSS プロパティの px 単位を rems に変換することです: font-size、margin、padding、border、width、height など。結果を新しい CSS スタイルシートに出力します。 .

質問:これを機能させるには、gulpfile.js 内に正確に何を入力する必要がありますか?

繰り返しますが、変数と要件の入力に関しては、私はまったく新しいものであり、ビデオとブログの例に従ってきましたが、ピクセルをレムに変換するための正しい式は特にありません (PostCSS には多くのプラグインがあるため)。

これは、現在の gulpfile.js に現在あるものです。

上記が本質的に行っていることは、「css-1」フォルダー内にある「styles-1.css」スタイルシート ファイルを取得し、「dest」フォルダー内にその複製を作成することです。PostCSS がどのように機能するかを理解するために読んでいた記事に従ってこのコードを入力しましたが、ピクセルを rem に変換するための正しいコードではないことは明らかです。

PS 現在、Windows 10 O/S を使用しています。