Maison > interface Web > tutoriel HTML > le corps du texte

css modules的几种技术方案_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:53:34
original
1447 Les gens l'ont consulté

css modules是一种非常的好css模块化解决方案,可以确保多人多项目不会样式冲突,下面是我找到的几种结构配套方案,可以根据需要做选择。

react

react就不多说了,搜一下基本都是react的demo,官方有几个demo。

  • webpack-demo
  • browserify-demo

Underscore templates

css-modules-html-demo使用了 Lo-Dash/Underscore templates,亲测可以生成html文件。

/*style/block1.css*/.element {  color: red;}
Copier après la connexion

引入css,就可以用 block1.element来调用class了

<% var block1 = require("./styles/block1") %><div class="${block1.element}">Block 1 element</div>
Copier après la connexion

生成的结构和样式

<div class="block1-element">Block 1 element</div>
Copier après la connexion
.block1-element {  color: red;}:export {  element: block1-element;}
Copier après la connexion

:export为对应的匹配规则,可以在 gulpfile.js修改命名规则。

var core = new Core([  Core.scope({    generateScopedName: genericNames("[name]-[local]"),  })]);
Copier après la connexion

这个方案是不错的方案,很多时候我们的基本骨架还是html。

jade

在官方的issue,有人问道能不能用jade,slim,haml之类的模板引擎。作者给出了如下的代码

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

但是实际上还要 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
Copier après la connexion

我写了一个demo,可以下载查看。

angular

这里有一个demo,可以下载查看具体用法。

vue

vue-loader默认用了 scoped css,但是没有css modules强大,我重新写了一个css-module-vue-demo

postHTML

posthtml-css-modules

ejs

postcss-modules-example

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!