css modules的几种技术方案_html/css_WEB-ITnose
程序员文章站
2022-03-17 12:08:02
...
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了
Block 1 element
生成的结构和样式
Block 1 element
.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
上一篇: 实现微信扫码支付php代码分享
下一篇: JavaScript闭包详细介绍
推荐阅读
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
分享15个优秀的 CSS 解决方案和工具_html/css_WEB-ITnose
-
css扩展技术:Less和Sass的区别_html/css_WEB-ITnose
-
针对易读性的背景滤镜兼容方案(CSS filter 兼容方案)_html/css_WEB-ITnose
-
Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable content-type: text/html" 的问题原因及解决方案_html/css_WEB-ITnose
-
如何快速阅读并理解英文的技术文档_html/css_WEB-ITnose
-
html5中frameset的替代方案_html/css_WEB-ITnose
-
谈一谈我遇见过的前端面试的几种方式_html/css_WEB-ITnose
-
如何快速阅读并理解英文的技术文档_html/css_WEB-ITnose
-
阿里巴巴技术文章分享:阿里云无线&前端团队是如何基于webpack实现前端工程化的_html/css_WEB-ITnose