問題タブ [postcss-import]

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.

0 投票する
1 に答える
110 参照

javascript - NodeJS CSS サブパッケージを解決していますか?

CSS ライブラリを作成していますが、RxJS と同じ方法でサブパッケージをサポートしたいと考えています。たとえば、RxJS を使用すると、キッチン シンク全体を次のようにインポートできます ( https://www.npmjs.com/package/rxjsから取得):

または、次のような個々のオペレーター:

私の最初の観察では、ルート モジュールのサブフォルダーにモジュールをパッケージ化するのと同じくらい簡単かもしれません。たとえば、RxJS node_modulesのインストール フォルダーには、などの監視rxjs/add/observable可能なすべての拡張機能を含むサブフォルダーがありますzip.js, throw.js...

したがって、このパターンに従い、 postcss-importを拡張して、サブモジュール フォルダー内のインポートを同じ方法で解決できます。例えば:

  • @import @superflycss/utilities-layout/margins

インポートnode_modules/superflycss/utilities-layout/margins.cssし、それが存在しない場合は を探し、存在しnode_modules/superflycss/utilities-layout/margins/index.cssない場合はエラーをスローします。

  • @import @superflycss/utilities-layout/margins/

輸入node_modules/superflycss/utilities-layout/margins/index.cssのみとなります。

私が作成しているモジュールには、ディレクトリにパッケージ化されたキッチン シンクがありますtarget/main/css/index.css。これにより、すべての css ユーティリティまたはコンポーネントが公開されます (モジュールのタイプによって異なります)。

問題は、RxJS と同様に、これが非常に重いファイルになる可能性があることです (たとえば、すべての Google フォントへのインポートが含まれています)。

したがって、RxJS のアプローチに従うことで、NodeJS の require.resolv() アルゴリズムが使用するのと同じルールに従うことで、全体がより柔軟になり、標準化されることを願っています。考え?

0 投票する
1 に答える
1706 参照

create-react-app - ファイルが別のファイルにインポートされたときに CSS 変数が解決されない

私は、開発者がサイトを構築するために使用する一連の UI コンポーネントを開発しているプロジェクトに取り組んでいます。Accordion コンポーネントを実装するために必要な CSS だけで構成される NPM パッケージを作成しました。

create-react-app を使用して作成された React プロジェクトに、npm install を介して css-accordion-component を開発依存関係としてインストールしました。React プロジェクトの Accordion.js ファイルは、次のように node_modules から css-accordion パッケージをインポートします。

これにより、スタイルがプロジェクトに取り込まれますが、ファイルで定義および使用されている CSS 変数は解決されません。CSS ファイルは次のようになります。

create-react-app でビルドされた React プロジェクトが、このインポートされた css ファイルを post-css プラグインを介して実行していないことが原因である可能性があると思います。PostCSS を使用するように Webpack を正しく構成する方法については、オンラインで時代遅れのアドバイスがたくさんあるようです。どんなアドバイスも本当に素晴らしいでしょう。

0 投票する
1 に答える
1047 参照

gulp - gulp: PostCSS の失敗 - postcss のバージョンが postcss-import のバージョンよりも高い

Gulp を使用して PostCss で CSS を変換しようとしています。

cssnext プラグインを PostCss に追加すると、次のエラーが発生します。

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.19, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.

これは私のgulpfile.jsです:

完全なスタック トレース:

私の知る限り、postcss-import パッケージは cssnext の依存関係です。それで、私は何をすべきですか?