問題タブ [postcss]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 列のカスタム幅を正しい方法で設定するには?
2 つの列を持つグリッド (「失われたグリッド」を使用しています) があります。1 つは 300px で 2 つ目は 630px、コンテナは 950px (20px は余白になります)。コードは次のとおりです。
次のように幅を設定しても大丈夫ですか: (0.65895/2)
、または何か間違っていますか? このように設定すると、(1/2)
必要な幅が得られません。
sass - Gulp の Sass で PostCSS を使用して font-awesome を実行する
こんにちは、postcss レイアウトで font-awesome を使用しようとしていますが、うまくいかないようです。だから私は投稿でsassをインストールして、それが機能するかどうかを確認しようとしましたが、どうすればよいかわかりません。
私はすでにsass用にnpm gulpをインストールしています
これは私のgulpファイル構成です
そして、このsass構成を追加しようとしています
webpack - @import ファイルの変更時に Webpack と Precss がリロードされない
私は基本的な Webpack インストールをセットアップしており、PostCSS と PreCSS プラグインを使用して、@imported ファイル内の前処理された CSS をブラウザーで自動的にリロードしたいと考えています。現在、@imported ファイルを変更して保存すると、ブラウザーは更新されません (以下の例では body.css)。次に、ルート参照 CSS ファイル (styles.css) を保存すると、ブラウザーが更新され、@imported ファイルに加えられた変更も反映されます。
構成可能な webpack-dev-server と server.js を使用してみました。ホット モデル リロード (HMR) をインストールせずに試してみました。
@imported CSSファイルをwebpackに監視させる方法はありますか、それとも根本的に何かが欠けていますか?
パッケージ.json
webpack.config.js
index.html
entry.js
スタイル.css
body.css
sass - Gulp postcss ロスト グリッド システム - フレームワーク
失われたパッケージがインストールされた gulp ファイルを取得しましたが、タスクの実行時に css が正しくコンパイルされていないようです。
私のgulpタスクは次のとおりです。
助けていただければ幸いです。よろしくお願いします。
編集: CSS 出力は期待どおりではありません。たとえば、CSS は次のようにレンダリングされます: .grid-one lost-utility: clearfix with: 100% div lost-column: 1/6
node.js - 「約束が定義されていません」というメッセージが表示されるのはなぜですか。ノード v5.7.0 でのエラー
postcssでautoprefixerを使用しており、新しい Linux サーバーに移動した後、何かが間違っているに違いありませんが、これが何であるかわかりません。エラーが発生します:
これは以下によって引き起こされます:
私はこの問題を調査しましたが、問題の発生はすべて非常に初期のバージョンの node.js で発生しているようです。たとえば、次のようになります。
そして、解決策は常に「ノードの更新」のようです。
しかし、私のものは最新のようです:
私の問題は何ですか?
twitter-bootstrap - postcss-module および react-css-module で react-bootstrap を使用するには?
以下は私の Greeter.jsx ファイルです。
以下は私のmain.jsファイルです:
postcss-modules と react-css-modulesを使用して、コンポーネント内のセレクターを分離します。これにより、ファイルが読み込まれると、クラス名が _3lmHzYQ1tO8xPJFY8ewQax のようになります。
例:
以下は、react-bootstrap が出力を与える方法です。
styleName(react-css-modules) ではなく bsStyle (react-bootstrap) を使用しているため、分離されていないため、要素にブートストラップ css スタイルを適用できません。
postcss-modules が生成する出力と一致するようにクラスを分離することで、react-bootstrap を使用できる方法はありますか?
ありがとうございます。
javascript - Webpack: 'style-loader!css-loader!postcss-loader' がインポートされたファイルを処理しないのはなぜですか?
index.css を @import する page.css があります。
page.css と index.css の両方がありますdisplay: flex
。
Webpack.config.js には以下が含まれます。
ビルド後、page.css のルールでプレフィックスを取得しましたが、index.css のルールにはプレフィックスがありませんでした。私は何を間違っていますか?
webpack - webpack で cssnext から postcss-cssnext に変換する
現在廃止されている cssnext および cssnext-loader の使用から、postcss-cssnext および postcss-loader への webpack 構成の変換に問題があります。私が再作成しようとしている機能は機能固有のプラグインに委譲されているというDocの状態は明らかですが、まだ機能していないようです。その一例が css 変数です。
私の現在の作業 webpack 構成は次のようになります。
...プラグインのインポート
...ローダー構成
...postcss 設定
問題:
新しい postcss-cssnext モジュールを指すように cssnext インポートを交換し、css 変数 (postcss-custom-properties) を処理するために必要になったモジュールを追加しました。cssnext-loader も削除しましたが、postcss-loader で処理できると想定していますか???
...プラグインのインポート
...ローダー構成
...postcss 設定
すべてのスタイルがページにレンダリングされていることがわかりますが、どの CSS 変数も評価されていません。中心的な問題は、「cssnext-loader」の使用に関連しているようです。再度追加すると、変数が機能します。postcss-import とさまざまな構成の反復を試しましたが、何も機能していないようです。誰かが私が間違っていることについて何か考えがありますか? postcss-cssnext、postcss-loader、css 変数、および webpack を連携させるにはどうすればよいですか?