問題タブ [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 - Webpack + postcss + テーマ + ホットリロード
ユーザーが自分のウェブサイトでテーマを選択できるようにしたいのですが、これはドロップダウンから行います。私は現在、ダムコードを書かずにこの機能をサポートする方法を理解するのに苦労しています.
私は現在、postcss と一緒に css-modules を使用して生活を楽にしています。Webpack は、すべてをまとめるために使用されます。開発中はホット リロードを利用し、代わりにスタイル ローダーを使用します。
完全な構成は次のようになります
解決策 1
body タグにクラス名を配置して、どのテーマがロードされているかを判別します。これは、各コンポーネント css 内から正しいテーマを選択するために使用されます。これは非常に面倒で避けたいことですが、次のようになります。
これはすぐに拡張が難しく、保守できないものになるため、避けたいと思います。
解決策 2
css の事前にテーマ設定された静的バンドルを生成します。ユーザーが を要求する/main.css
と、サーバー上のハンドラーが送信するテーマ (おそらくクエリ文字列) を決定し、それらの行に沿ってそれらまたは何かtheme1-main.css
を送信します。theme2-main.css
問題は、開発環境をサポートする方法がわからないことです。
これの良いところは、私の css ファイルが追加のロジックを維持するのが難しいことを必要としないということです:
解決策 3
ネイティブの CSS 変数を使用します。これらは実行時に更新でき、すでにロードされている css を反映し、本番環境と開発環境の両方で正常に動作します。私のコンポーネントも解決策 2 のように (または同様に) 見えます。ここでの問題は、それらがネイティブであまり広くサポートされていないことです。また、この種のことを行うために検討する価値のあるポリフィルがあるかどうかもわかりません。
以上が私の考えです。私はまだ決定的な結論に達していません。この問題を解決する方法について、すべてのフィードバックをお待ちしております。おそらく、私はそれについてすべて間違って考えており、私がやりたいことを行うためのはるかに良い方法があります.
前もって感謝します!
javascript - React コンポーネントで PostCSS を使用する
反応でコンポーネントのスタイルを設定するために classNames を使用していますが、react-selectなどのコンポーネントを使用する場合、スタイルをインポートしreact-select/dist/react-select.min.css
てコンポーネント内で使用する方法を教えてください。
これが私のコードです。私の反応選択はスタイルが設定されていません。それを達成する方法は?
reactjs - スタイル配列を React コンポーネントに渡す
postcss-loader および css モジュールを使用して、スタイルの配列を React コンポーネントに渡したいと考えています。css ファイルをコンパイルするための私の webpack.config.file は次のようになります。
私の React コンポーネント ファイルは次のようになります。
className にスタイルを 1 つだけ渡すと、正しくロードされますが、配列を渡すと、それらのいずれも解決されません。代わりに、コンパイル クラス名にコンマを付けて連結します。
複数のスタイルを要素に渡すにはどうすればよいですか?
javascript - Webpack、React、postCSS、および場合によっては他の JS コードが適切に挿入されているため、prod ビルドの問題が発生している
webpack.prod.config でアセットを適切に構築することに問題があるか、JS Babel 構成に問題がある可能性があります。
CSS をインライン化する開発ビルドで動作させることはできますが、本番用に 1 つの CSS ファイルにまとめようとすると動作しません。何が起こっていても、Dev では CSS がそれぞれのコンポーネントの import './filename.css' によって直接挿入されて動作します。JS の可能性もありますが、製品用にビルドすると、CSS が正しく機能せず、JS も機能しません。すべての React JS コンポーネントとその他の JS は表示されず、CDN インポートからの静的な HTML と CSS スタイルだけが表示されます。Webpack によって挿入されたスクリプト タグの URL をクリックすると、奇妙に感じた JS または CSS ソースではなく、同じページに誘導されます。Build > Static > JS + CSS 出力で、JS と CSS は正しいように見えます。いつか私は
それか私のJSが壊れていて、ページを正しく構築していません。私の本番ビルドにはありません(Herokuにデプロイされたときと同じビルドです)。create-react-app (ejected) から始めて、Express、preCSS (前処理のような SASS 用)、react-bootstrap などを追加しました。
このプロジェクトは、新しい Web 開発者が静的 HTML+CSS の使用から React、JS、および Bootstrap の使用に移行するための学習ツールとして使用しているものであるため、混乱のようなものです (jQuery は一時的にそこにあり、物事を一緒に変換して純粋な React)。以前は問題なくビルドできていましたが、postCSS + preCSS を使い始めて以来、機能しなくなりました。
以下は、私が使用している主なパッケージ/ライブラリの一部です。- jQuery (CDN スクリプト タグ) - BS3 (CDN スクリプト タグ、.js、.css) - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin
よろしくお願いいたします。
コンソールに表示される HTML + エラー
[![生成される HTML][1]][1] [![コンソール エラー][2]][2]
Webpack.config.prod.js
Build.js
css - css next 変数をグローバルに使用する
http://cssnext.github.ioでpostcss パーサーをセットアップしておりvariables.css
、すべてのテーマ設定を含むファイルをセットアップする方法を見つけようとしています。
これまでのところvariable.css
、いくつかの変数でこのように見えます
これらの変数を使用したい他のファイルにインポートして、たとえば@import './variables.css'
そのファイルで使用しますがbackground-color: var(--color-white)
、次の警告が表示されます。
変数 '--color-white' は未定義であり、フォールバックなしで使用されます [postcss-custom-properties]
javascript - Webpack Postcss-Loader: モジュール解析エラー
簡単なプロジェクトをまとめて Webpack の細かい点を学ぼうとしていますが、スタイルシートの読み込みで問題が発生しています。Node v4.4.4 と Webpack v1.13.1 を使用しています。
これが私のWebpack構成です:
私のindex.jsファイルは1行です:require('./styles/app.css');
これは私の app.css ファイルです:
エラーは次のとおりです。
このエラーの原因と対処方法を教えてください。