問題タブ [cssnext]
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.
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 を連携させるにはどうすればよいですか?
autoprefixer - cssnext にブラウザリストを追加する方法
postcss-cssnextを使用しており、webpack.config で autoprefixer を削除しました
cssnextが含まれています。cssnext にはすでに autoprefixer が含まれているため、両方を含める必要はありません。browserslistを cssnextに渡す方法を知りたいのですが。これは私が現在持っているものです：
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]
css - css モジュールのクラスを混在させ、ブーストラップを有効にする
私が取り組んでいるプロジェクトでは、css モジュールをpostcss(またpostcss-cssnextとpostcss-include) と共に使用します。グローバルに提供される依存関係としてブートストラップもあります。
特定のコンポーネントには、ボタンのカスタム クラスがあります。したがって、私のボタンには次のクラスがありますbtn btn-custom。
要件に従って、ボタンがアクティブな状態のときにボタンの外観を変更したいと考えています。そのため、ブートストラップには次のセレクターがあります: .btn.active, .btn:active. 疑似クラスの上書きは簡単です。ただし、.activeクラスは難しいところです。
私のcssファイルで、これを処理する方法をいくつか試しましたが、うまくいかないようです。ここに私が試したことのいくつかがあります：
これをどのように達成できるかについて誰か考えがありますか?
reactjs - すべての css ファイルで変数を再利用する - postcss-cssnext を使用し、具体的には css-modules で postcss-custom-properties を使用します
css-modules を postcss-cssnext とともに使用しています 、特にその postcss-custom-properties 機能
また、react-boilerplate ( https://github.com/mxstbr/react-boilerplate/ ) も使用しています。この非常に優れたボイラープレートには、これらのモジュールが使用されています。
私のフォルダ構造は次のとおりです。
アプリ/styles.css
これらの vars を App/styles.css で使用したい (または、別の場所でそれらを定義してよろしいですか。その場合、どのようにすればよいでしょうか)。
私は試しました（css-modulesで使用するため）
ホームページ/index.js
HomePage/styles.css -- アプローチ 1
HomePage/styles.css -- アプローチ 2
最もエレガントなソリューションは何ですか? すべての変数を1つのファイル/1つの場所に配置し、すべてのcssファイルでそれらをうまく使用したい
variablespostcss-custom-properties https://github.com/postcss/postcss-custom-properties#variablesでも見ました。しかし、postcss-cssnext を使用する webpack 定義での使用方法がわかりません