网站怎么显示建设中,背景墙图片2023新款,php网站开发工作描述,中财盛建设集团公司网站React的组件式开发#xff0c;让我们可以利用其Component Model#xff0c;专注于单个组件的逻辑开发#xff0c;其中还包括组织组件的样式。先声明#xff0c;本文并不是webpack配置教程#xff0c;不会介绍详细的配置过程#xff0c;假设你们已经用过了css-loader styl… React的组件式开发让我们可以利用其Component Model专注于单个组件的逻辑开发其中还包括组织组件的样式。先声明本文并不是webpack配置教程不会介绍详细的配置过程假设你们已经用过了css-loader style-loader extract-text-webpack-plugin。 正在使用的方式 我们理想中的文件结构可能会是这样的 - components- modal- modal.jsx- modal.css // 可以是任意预处理器- dropdown- dropdown.jsx- dropdown.css然而js现在可以做模块化css并不行所有css的定义都可以被视为全局变量在css被打包后一个组件的样式有可能会影响到其他组件于是我们可以通过命名约定name convention来曲线救国这一点并不局限于react开发。 modal-prefix: modal;.{modal-prefix} {
}.{modal-prefix}-title {
}类似于上面的使用less的方式在文件顶部先定义个类的前缀来尽量避免命名冲突的可能。于是在组件中就可以这样做 import React from react;
import ./modal.less;export default React.createClass({render () {return div classNamemodal-titleHello/div;}
});上面就是我现在在用的方式利用命名约定做到了伪模块化其实即便不是在使用react开发项目也会用类似的方式。 CSS in JS 之前看到过一个ppthttps://speakerdeck.com/vjeux/react-css-in-js谈到了类似的问题。 一个方向是把样式也直接写进组件里即使用inline style。首先直接用传统的inline style并不可取它对属性的支持有限比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言在react中倒是还行将需要重用的样式对象作为模块导出即可。 其实大家很努力地希望CSS in JS可以实现比如 react-style github地址 它的局限就是上面提到过的属性支持的问题没有细究这个东西不太喜欢。 local scoped CSS https://github.com/css-modules/css-moduleshttps://github.com/webpack/css-loader#local-scope 用这个东西现在是webpack官方支持的已在css-loader中实现可以真正让你的css代码作为本地声明类似的代码 // style.css
:local(.title) { background: red; }在需要这份样式的组件里引入这个模块 import styles from style.cssdiv className{styles.title}/div 首先css的语法中是不支持这个:local()的我们先看看页面最终的代码 div class_3dpOqNNJl6oyjYpdDHCFD9 data-reactid.0.2.1Info/div到这里应该明白了其实这也算是个预处理器它将:local(.title)的类名变成了一个哈希值仅可以通过模块导入的方式来获取这个哈希值并应用到组件上生成的类名是可以配置的。现在css-loader可以通过添加module选项详细内容可以参考上面CSS Modules的链接使得css默认定义的是local scoped的希望共享的可以用:global()定义。 也可以和预处理器混用 :global {.global-class-name {color: green;}
}目前看下来它只对class名做哈希也就是说 :local(.title span) // .[hash] span然而 :local(.title .name) // .[hash0] .[hash1]这个算是一个有意思的方式首先它依赖于webpack而webpack并不局限于React的开发任何前端项目都可以使用webpack那么就也都可以使用CSS Modules的概念不知道这个CSS Modules会有怎么样的发展感觉可以尝试。 这里是一个使用样例https://github.com/css-modules/webpack-demo 写在最后的话 目前的探索结果暂时是这样之后可能会继续来填坑。反正现在应该不会去用CSS in JSCSS Modules可以一试因为css-loader这个插件基本react的项目里都会使用写好的组件一个import 样式和组件都有了不过仍需实践。
