CSS modules_html/css_WEB-ITnose 用のいくつかの技術ソリューション

css モジュールは、複数のユーザーと複数のプロジェクトでスタイルの競合が発生しないようにするための非常に優れた CSS モジュール ソリューションです。私が見つけたいくつかの構造一致ソリューションをご紹介します。が必要です。

react

react については多くは言いませんが、検索すると基本的に React のデモが表示されます。公式のデモもいくつかあります。

• webpack-demo
• browserify-demo

アンダースコアテンプレート

css-modules-html-demo は Lo-Dash を使用します /アンダースコア テンプレート、個人テストは HTML ファイルを生成できます。

/*style/block1.css*/.element {  color: red;}

CSS を導入すると、block1.element を使用してクラス

<% var block1 = require("./styles/block1") %><div class="${block1.element}">Block 1 element</div>

生成された構造とスタイル

<div class="block1-element">Block 1 element</div>

.block1-element {  color: red;}:export {  element: block1-element;}

:export を呼び出すことができます。対応する一致ルールに応じて、命名ルールは gulpfile.js で変更できます。

var core = new Core([  Core.scope({    generateScopedName: genericNames("[name]-[local]"),  })]);

多くの場合、このソリューションは依然として HTML のままです。

jade

公式問題で、jade、slim、haml などのテンプレート エンジンを使用できるかどうかという質問がありました。著者は次のコードを与えました

doctype html- styles = require("./styles.css");html(lang="en")  body    h1.global(class=styles.local) CSS Modules & Jade

しかし実際には、style-loader と css-loader?modules

doctype html- styles = require("!style!css?modules!./styles.css");html(lang="en")  body    h1.global(class=styles.title) CSS Modules & Jade

デモを書きました。ダウンロードして表示できます。

angular

具体的な使用方法を確認するためにダウンロードできるデモがあります。

vue

vue-loader はデフォルトでスコープ付き CSS を使用しますが、CSS モジュールほど強力ではありません。 css-module-vue-demo

を書き直しました。 postHTML

posthtml-css-modules

ejs

postcss-modules-example