转载

css modules的几种技术方案

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; }

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

<% 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

在官方的issue，有人问道能不能用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

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

angular

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

vue

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

postHTML

posthtml-css-modules

ejs

postcss-modules-example

原文 https://github.com/zhouwenbin/blog/issues/15

正文到此结束

所属分类：编程技术

本文标签： UI http core js example https HTML文件 git HTML web 代码 GitHub CSS 下载
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

css modules的几种技术方案

react

Underscore templates

jade

angular

vue

postHTML

ejs

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流