Rob Dodson が述べたように、style
タグは Web コンポーネントでは避けられなくなりました。LESS ファイルで何かを変更するたびに、コンパイルした CSS を HTML ドキュメントに貼り付けることなく、この新しい技術で LESS を使用する方法を見つけようとしています。とにかくそれを達成することはありますか?
ポリマーを使用しています。
ありがとう!
ローラン
これをクライアント側で行うことは、特に大規模な場合、適切なソリューションとは思えません。たとえば、アプリに 1000 個の Web コンポーネントが必要で、そのすべてに LessCSS とクライアント側でのコンパイルが必要ですか?
サーバー側でコンパイルし、コンパイルされたバージョンを html インポートに含めるだけです。DocPad などのアプリを使用すると、これがはるかに簡単になります。例えば:
src/documents/components/my-component/my-component.css.less
はソース ファイルであり、 にコンパイルされます。out/components/my-component/my-component.css
これは でアクセスできます/compoennt/my-component/my-component.css
。
このワークフローを使用して、coffeescript などの JavaScript プリプロセッサ、css auto prefixer などのポストプロセッサ、Browserify などのバンドラーも利用します。詳細については、 https : //stackoverflow.com/a/23050527/130638を参照してください。
クライアントに LESS を CSS にコンパイルさせることができます。これを必ず確認してください。
http://lesscss.org/#client-side-usage
ただし、実稼働環境で自分でコンパイルして css にすることをお勧めします。
less をコンパイルし、生成された CSS ファイルを古き良き link タグを介して埋め込むだけです。
スタイルタグを使用することが唯一の方法であると rob が言いたかったわけではないと思います。これまでどおり、外部スタイルシートにリンクできます。
PHPコンパイラを使用してサーバー側でコンパイルしてみませんか? ここを見てください - http://leafo.net/lessphp/ - お知らせするために、私は自分のプロジェクトでこのコンパイラをサーバー側で何の問題もなく使用しています!!!!! :) IMO、サーバー側でコンパイル作業を行う方が良いです。完全に 100% 確信があるわけではありませんが、IE8 は text/less を認識しないと思います
以前にこれを行った方法は、コンポーネントごとに個別の .less または .scss ファイルを用意し、それを個別の .css ファイルにコンパイルしてから、それぞれのコンポーネント ファイルに呼び出すことです。最後にすべてを 1 つのファイルに加硫します。単一の CSS ファイルを使用する場合は、CSS で //deep// コンビネーターまたは ::shadow 疑似要素を使用します。
ShadowDOM を使用せずにカスタム要素を作成できる場合は、すべての要素を 1 つの CSS に簡単にマージできます。正直なところ、私はポリマーで ShadowDOM なしで wc を作成できませんでした。github には、shadowDOM なしで wc を作成する方法の有効化/無効化とハッキングに関する長い会話がありますhttps://github.com/Polymer/polymer/issues/222