プリプロセッサのインポートに問題があります。機能をコピーしたいベンダー css があります。残念ながら、私はこの状況でも html を制御していません..基本的に、ベンダー css と異なるベンダー html があり、ある css ルールの機能を別の css ルールに拡張しようとしています。
現在、多くの css プリプロセッサの基本的な概念は、ルールを拡張することです。
// Vendor
.foo { font-weight: bold; }
.bar { text-color: red; }
// Mine
.bar { .foo }
.foo上記の例では、またはにアクセスできません.barが、プリプロセッサを使用すると、機能を から.fooに拡張できます.bar。これは、less/stylus/etc に最適です。問題は、ベンダー ルールが生の CSS でのみ定義されている場合です。
そうは言っても、最も明白な解決策は、Stylus/Less に生の CSS を stylus/less としてインポートさせることです。しかし、どちらも実際にこれを行うことができないようです..少なくとも私が見つけた. Less はできないようです(@import "foo.css"ディレクティブは無視されます)。Stylus には、インポートされた未加工の CSS を実際に含めるオプションがありますが、実際にはそれを処理していないようです。つまり、css が含まれますが、@extendディレクティブが失敗しました(おそらく私が間違っているのでしょうか?)。
私が考えることができる他のオプションは、単に .css ファイルの名前をプリプロセッサ言語拡張子に変更することです。適切なバージョニング/etc を可能にするために、ベンダーのものを私たちの手から離したいので、これには、ターゲット css ファイルをコピーしてターゲット言語拡張に名前を変更するビルド プロセスが含まれますが、これはエラーが発生しやすいです。Stylus はすぐに構文エラーに遭遇しましたが、Less でも同様に簡単にエラーが発生しました(すべての CSS が有効であるとは限らないため、Less. ほとんどは有効ですが、すべてではありません)。
それで..この面で何か追加の考えはありますか？うまくいけば、私が見逃しているかもしれないオプションがありますか？おそらく、SCSS はこれをより適切に処理しますか?
現在、私が発見したことは可能/不可能です..唯一の安定した方法は、生のcssビットをcssコードに単純にコピーすることだと思います。ベンダー コードが変更された場合は、手動で更新する必要がありますが、少なくともベンダーのものを変更するリスクはありません。ベンダーが less/etc でサポートされていない CSS 構文を導入したため、突然ビルド プロセスが失敗します。 . それは良いとは言えません..しかし、起こりうる最悪の事態は、CSSがおかしいように見えることであり、更新する必要があります。
編集：
次は SCSS を試してみます。どうなるか見てみましょう。このサイトでは、すべての CSS(3 のみ?) 構文が有効であると主張しています SCSS
edit2:わかりやすくするために。私の質問は、上記のシナリオを考えると、あなたならどうしますか? .css ファイルをインポートすることはできません(以下の注を参照してください!)。.css ファイルの名前を .less/.stylus に変更すると、エラーが発生しやすくなります。
！ノート！: それ以来、私はこの問題を回避するのではなく、この問題を修正するために何ができるかを確認するために、より少ないソースを掘り下げており、この問題に関する多数のサポート チケットに遭遇しました。主な議論は#issue 1185で行われているようですが、さらに重要なことに、この問題に対処している *(私が信じている) 変更ログをチェックしてください! 変更ログ 1.4.0 ベータ版
そうは言って@import (less) "file.css"も、ベータ版の状態のためにいくつかのバグがあるかもしれませんが、ここではおそらく勝者のシナリオです. わーい ：）