Postcss

Qualcomm Wi-Fi 7 network chip solutions IPQ9574 and IPQ9554 are advanced wireless connectivity solutions developed by Qualcomm Technologies. These chips are designed to support the Wi-Fi 7 (802.11be) standard, which offers significant improvements in speed, capacity, and efficiency compared to previous Wi-Fi generations. The IPQ9574 and IPQ9554 chips incorporate advanced features and technologies to deliver high-performance wireless connectivity. They utilize the latest Wi-Fi 7 features, such as multi-user MIMO (MU-MIMO), Orthogonal Frequency Division Multiple Access (OFDMA), and 160 MHz channel bandwidth. These features enable faster data transfer rates, reduced latency, and improved overall network performance. Additionally, the IPQ9574 and IPQ9554 chips support advanced security protocols to ensure secure and reliable wireless connections. They offer enhanced encryption mechanisms and authentication protocols to protect against potential security threats. These Qualcomm Wi-Fi 7 network chip solutions are aimed at various applications, including home routers, enterprise access points, and other wireless networking devices. By leveraging the capabilities of Wi-Fi 7, they enable faster and more efficient wireless communication, meeting the increasing demands for high-speed connectivity in today's connected world.Wallys/ipq9574/ipq9554,These two chips have been purchased, designed and made samples to produce our router board.Networking Pro 820: The chip model is IPQ9574, supporting 4 frequency bands and 8 data streams, with a peak rate of 16Gbps. It supports 4 ports of 2.5G, 1 port of 5G, and 1 port of 10G.Networking Pro 620: The chip model is IPQ9554, supporting 3 frequency bands and 6 streams, with a peak speed of 10Gbps. It supports 4 ports of 2.5G and 1 port of 10G. ...

PostCss是一个用 JavaScript 工具和插件转换 CSS 代码的工具 利用从 Can I Use 网站获取的数据为 CSS 规定增加特定厂商的前缀。 Autoprefixer 主动获取浏览器的风行度和可能反对的属性，并依据这些数据帮你主动为 CSS 规定增加前缀。PostCSS Preset Env帮你将最新的 CSS 语法转换成大多数浏览器都能了解的语法，并依据你的指标浏览器或运行时环境来确定你须要的 polyfills，此性能基于 cssdb 实现。CSS模块能让你你永远不必放心命名太大众化而造成抵触，只有用最有意义的名字就行了。通过应用 stylelint 强化一致性束缚并防止样式表中的谬误。stylelint 是一个现代化 CSS 代码查看工具。它反对最新的 CSS 语法，也包含相似 CSS 的语法，例如 SCSS 。我的项目中引入postcss比方常见的兼容性问题，有些css款式在某些浏览器无奈展现，因为不兼容。此时须要引入postcss工具，利用Autoprefixer获取浏览器风行度和可能反对的属性，依据postcss-preset-env把CSS 语法转换成大多数浏览器都能了解的语法。这是解决兼容性css代码的流程。这里有个问题，如何晓得是什么浏览器，不同浏览器反对的css语法不一样。这里须要引入一个新的工具browserlist，用于在不同前端工具之间共用指标浏览器和node版本的配置工具。应用 Can I Use 网站的数据来查问浏览器版本范畴。简略来说，就是用来管制浏览器版本的一个插件。Broswerlist配置形式能够再package.json中配置 "broswerslist":[ ">0.01%", "last 2 version", "nodt dead" ]或者在根目录下新建.browserlistrc文件写入 > 0.01% last 2 versionnot dead配置案例一般的css,less文件在webpack中的配置如下 module: { rules: [ { test: /\.css$/, use: [ "style-loader", "css-loader", ], }, { test: /\.less$/, use: [ "style-loader", "css-loader", "less-loader", ], }, ], },退出postcss后 ...

2021年12月07日：留神这是一篇公布于2018年的老文章，因网友提到上篇文章有个链接生效的问题，故将过后写的文章迁徙过去（文章之前存于上家公司的FE外部提交，到职已久，正好借机迁徙，防止失落，也算是终结这几篇PostCSS的学习笔记）。当然这么多年PostCSS倒退迅猛，变动也很大，故这套教程也仅供参考），以下是原文内容： 几个月前写了几篇对于PostCSS的文章，波及到根本配置钻研和插件的摸索，起初还有几份不成文的草稿，因为本身技术钻研不够深刻也就始终没有写完，也不打算更新了（放在文章底部，有趣味本人看看：）。起初正巧有集体在GitHub下面提了个issue对于postcss-px-to-viewport插件的应用postcss-px-to-viewport插件的应用，也就尝试用了新单位vw来做挪动端的适配策略。以下便是PostCSS最初的内容了。PostCSS挪动端适配值VW单位利用之前的番外篇一曾经写了px转为rem的相当成熟的形式了。这次要介绍PostCSS另一个使用VW单位来进行适配的计划。基于之前的PostCSS配置，装置postcss-px-to-viewport插件，貌似是目前惟一一个能够转换成viewport单位的PostCSS插件。 这个插件跟之前的postcss-pxtorem插件比拟相似，配置办法见官网阐明这里就不多说了，当然还是要用到amfe-flexible，其实新单位的对旧的手机零碎和浏览器来说必定还是不适合的，目前也没有一个精确的数据来证实这个不会呈现兼容性问题。 当然，将来趋势来看，用这个在不同分辨率的设施适配上的劣势还是比拟大的，能够参考我的GitHub的一个挪动端DEMO。 PS：其实我始终都很不适应之前设计稿750px，测量了设计稿的尺寸后，还须要手动除以2，这个齐全能够通过配置来间接写原始尺寸的？不过就我集体来看，我还是偏向采纳rem单位，或者更加稳固吧！ 如果还有疑难，欢送留言，对于PostCSS的所有内容就算完结了，也心愿其余敌人们在应用中一起学习探讨:D 【草稿】PostCSS学习指南-插件（三）postcss-sorting这是一款可能按主动帮忙你的css属性进行规范化排序的一个小插件，对于有整洁代码强迫症的敌人来说，这个插件存在的意义就比拟大了。 https://github.com/hudochenko... 相似的另一个插件：css-declaration-sorter 其余： postcss-pxtorem对px进行疏忽解决的形式仿佛更好 postcss-px2rem却没有被收录在PostCSS的列表中 https://github.com/anandthakk... 一个本地应用的caniuse我的项目 【草稿】PostCSS学习指南（三）【栅格化布局】参考文献 你的布局设定办法靠谱吗？ A Complete Guide to Grid bootstrap4 Grid system & bootstrap3文档栅格零碎 The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!（开端有大量干货） 浏览bootstrap4栅格化官网阐明的一点心得不瞒大家，我之前并未在我的项目中应用过bootstrap，也只是晓得这个货色和他的UI的一些标准而已。这次有幸理解到bootstrap栅格化的计划，尤为惊喜，竟然有这么好的适配办法！不愧是弱小的响应式布局CSS框架啊！！！ 如果大家相熟bootstrap栅格化的形式，可略过此内容。 后记随想（2021年12月07日）当年写这几篇文章的时候热血沸腾，连SCSS、LESS都没搞得很明确的状况下，一门心思想钻研PostCSS，过后国内没有一本书籍介绍PostCSS（可能有一本，有点想不起来了），还想着我要出一本书，最终还是因为精力有限，没有去进一步深究，说到底也是Javascript根底尚不扎实，再加上本人常常三分热度做事。 不过话说回来，依据集体教训，兴许和工作环境无关，起初的很多开发中，除了挪动端或者会用到PostCSS，简直没有再用了。然而现在我十分喜爱的TailwindCSS、PurgeCSS这些都和PostCSS有肯定关系，对于前端将来的倒退，我仍然感觉PostCSS是十分不错的玩意。除了我的这套文章有些掉队，也还是十分反对大家去学习去钻研PostCSS的~ 如果想要从头看，请浏览2017年公布的PostCSS自学笔记（一）【装置应用篇】

1.amfe-flexible依据网页宽度主动更改html字体大小yarn add amfe-flexible -Snpm i amfe-flexible -Smain.js中引入import "amfe-flexible"2.postcss下载yarn add postcss postcss-pxtorem@5.1.1 -D主动将px转换为rem根目录下创立postcss.config.js文件module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } }}

Project Case Study – Semester 3Travel Management System:John is working as a Java Developer in Dream Travel Inc. He has been assigned a task todevelop a software “Travel Management System”. Currently the Contact details of all thetourists are being stored in a physical register maintained by the various receptionists. Thiscurrent process of storing details leads to the following problems: Contacts are not being added on timeOld contacts are not being updated systematically.Searching Contact details are tedious job for receptionist.As one receptionist finishes his/her duty, another receptionist will take over theresponsibility, which creates lots of confusion for them, because they are not aware ofwhat manipulations has done by earlier person.John has decided to develop an application by considering the following guidelines:First of all, whenever this software gets open, Dream Travel admin should enter his/herUsername & password in order to use this application.After the successful login, admin will be redirected to the Home Panel, where he will findthe following options.a. Tour Packages option: By clicking on Tour packages button he/she will switched toTour Packages Frameb. Tourist Record option: by clicking on Tourist record Button: By clicking on TouristRecord button he/she will switched to Tour Packages FrameIf the admin chooses Tourist Record, admin will be able to add new tourist record,update existing tourist record and in addition to that admin can able to see all touristlist and also can delete any record, if required.Here, after clicking on Add tab, New Tourist record can be added.For this, the admin has to enter the following details.NameContact No.AddressNationalityPassport No. of a particular touristIf the admin click on Edit option, Admin can change the following details by choosing his/herpassport number from the drop down list:NameContact no.AddressNationality (from drop down list)By clicking on Delete tab, the Tourist record can be deleted, for this his/her passport numbershould be selected from the drop down list. Tour Packages Option:In Tour Packages option, admin will be able to add new tour packages and edit/ deleteexisting tour packages.Here for adding tour package, Admin will click on Add tab, thenEnter package nameEnter package codeEnter CountryEnter daysEnter ItineraryNow the admin can submit the records, by clicking on Submit button, then the new tourpackage will be added.The admin can also reset the wrongly entered data, by clicking on Reset button.Next, the admin can edit a package and also delete a package.By clicking on delete tab and entering the details of, ...

报错信息 解决方案 在 package.json 删除 autoprefixer 的空配置即可

背景我的项目采纳monorepo(yarn workspace)形式来治理，当应用vant这种库的时候，须要在援用处配置.postcssrc.js来解决rem和px转换。 // .postcssrc.jsmodule.exports = { 'postcss-pxtorem': { rootValue: 50, propList: ['*'], },};问题由此产生 规定首先咱们须要通晓postcss和monorepo的根底规定 .postcssrc.js只对文件所在目录与上级目录产生成果； 反过来说当webpack编译某个文件a的时候，会一路从a向上找postcss配置，找到第一个后就利用。monorepo的一项根底优化是将所有我的项目的依赖node_modules合并晋升到我的项目根目录。问题1.0因为下面的规定产生了一个问题 多个我的项目援用vant的时候，因为vant版本不统一，导致有的在根目录的node_modules有的在包当前目录的node_modules； 多个vant很难保障应用统一的版本多个vant很难保障应用统一的配置2.0一个天然的解决办法是将vant收敛到某个包中，其余包应用的时候从这个包外面援用 // package-commonimport { Button } from 'vant';export { Button };// package-mobileimport { Button } from 'package-common';惋惜这样是不行的。这波及到vant这种ui组件库的另一个性能，局部引入； 即局部引入，vant官网应用babel-plugin-import实现此性能。只须要配置babel.config.js即可实现。// babel.config.jsmodule.exports = { presets: [...], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]}这个plugin的个性 将import语句转译为多条语句不会解决export语句demo如下 // package-commonimport { Button } from 'vant'; ↓ ↓ ↓ ↓ ↓ ↓var _button = require('vant/es/button');require('vant/es/button/style/index.js');因而对于咱们下面的应用形式产生了如下问题 ...

简介： SRE技术保障平台-盯屏核心TAC： 混合云一站式告警运维平台1.指标定位1.1背景 告警管控平台品种繁多告警呈现后未及时发现解决最终导致故障产生专有云监控能力拉起依赖版本升级，操作简单，迭代慢异样问题和故障的感知力不如客户1.2指标 制订告警数据接入标准实现告警对立集中展现建设多种告警外发告诉独立部署、疾速迭代告警重大水平辨别，晋升感知力1.3定位 图1：TAC定位 2.平台简介2.1介绍 SRE技术保障平台-盯屏核心（TAC-TAM Alarm Center）是TAM为混合云精心打造的一站式告警运维平台，笼罩混合云所波及的云产品、大数据、云实例以及用户所波及的站点利用等告警，提供告警生命周期治理以及报警外发等解决方案。帮忙混合云平台疾速发现、定位异样问题，帮助产品团队促成产品改良。 2.2特点 2.2.1告警汇聚 默认集成：云平台、大数据、云实例、站点利用反对扩大：自定义监控2.2.2报警通道 钉钉&本地化钉钉短信服务企业邮箱警务微信2.3业务服务流程 图2：TAC业务服务流程图 3.次要性能及界面展现3.1告警盯屏核心 实时展现云平台以后所有的告警数据以及列出近7天的产品告警TOP排行, 高深莫测告警数据, 晋升感知力。图3：告警盯屏核心界面展现 3.2SRE运维大盘 通过指标化，更不便查看产品的健康状况，判断是否有故障；指标项蕴含：衰弱率、成功率、转实例、准时率、正常率、运行率、使用率、写成功率、读成功率。图4：SRE运维大盘界面展现 3.3告警工作台 用户能够在平台告警页面上认领新增的待处理告警，线下解决实现后能够在我的告警页面上敞开该告警。当认领了本人不善于解决的产品告警，能够通过线上转发的形式移交给善于解决的同学。若呈现长期无奈解决的告警，在确认无影响的状况下能够抉择疏忽该告警，防止始终外发造成音讯轰炸。主动复原的告警无需手动认领敞开，在历史告警中能够进行查看。图5：告警工作台界面展现 3.4事件服务中心 突破签字、短信、邮件式古老的运维治理形式，为客户将泛滥的线下流程移⾄线上，预设相应的管理体系，以线上提交、线上反馈的模式，能够对立治理、追踪闭环、数据存档，为⽇常流程管理工作提供更多解决⽅法，逐渐代替线下治理。 图6：事件服务中心界面展现 3.5告警控制策略 反对设置主动分派策略，当指定产品呈现告警主动认领告警；当天首次呈现的告警立刻告诉，非首次呈现的告警遵循1440分钟的静默期后告诉;反对管制告警发送时的状态，“产生时”、“认领时”、“敞开时”；反对预约在指定的工夫范畴内使某一类型的告警进入静默期，告警外发临时生效；反对对告警推送的告警类型，产品，级别，部门，我的项目等进行自定义配置。图7：告警控制策略界面展现 3.6告警推送策略 提供用户体系，零碎会辨认用户的手机号码以及邮箱地址来发送告警；提供钉钉、短信、邮件的外发的webhook，api接口的配置；能够抉择的一个或多个告警策略自定义配置推送告警图8：告警推送策略界面展现 3.7监控网关 反对在监控工作页面配置用户关怀的网站、机器或某个接口，TAC依据规定进行监控；若现场之前有提供过黑屏化的监控工具，用户能够在注册API页面注册一个APP，依据接口调用标准将监控后果上报至TAC以第三方告警来展现和外发。图9：监控网关界面展现 3.8钉钉告诉 图10：钉钉告诉成果展现 4.结语目前，混合云少数我的项目已通过TAC实现告警告诉性能。无效进步告警解决效率，缩小因告警未及时处理导致故障的状况，大幅提高我的项目运维品质，缩小我的项目人力投入老本。 作者：黄家亮  阿里云智能GTS-SRE团队资深技术支持工程师原文链接 本文为阿里云原创内容，未经容许不得转载

css 预处理工具，可以将其编译为 css基本介绍sass/scssSASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，sass 不兼容 css 代码Sass3 就变成了Scss(sassy css) 与原来的语法兼容，只是用{}取代了原来的缩进sass 的运行 依赖于 ruby 环境（compass 将 sass 编译为 css）现在可用 node-sass 来编译 sass/scss 文件 node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具原始的sass 是用 ruby 编写的，所以需要 ruby 环境，libSass 是原始sass引擎的一个 c/c++ 接口，使用它编译sass不依赖于ruby，可以使用其他语言使用libSassnode-sassruby-sass与libsass的区别安装node-sass时，会去GitHub 下载一个 .node的文件而这个文件托管在墙外的服务器上，所以失败了 node-sass安装失败解决方案以 .sass 或 .scss 为文件后缀名称（现在一般都是用 scss）lessless 2009年出现，受sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了sass演变到了scss的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。less 可以使用 less.js 在浏览器运行时中解析 less 代码也可以在 node环境中 安装 less，提前编译 less 文件 `npm install -g less &lessc styles.less styles.css` (可以加参数控制编译后的css排版及压缩)以 .less 为文件后缀名称stylusStylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，由 TJ 大神开发安装及编译 npm install stylus -g & stylus src/ (可以加参数控制编译后的css排版及压缩)以 .styl 为文件后缀使用现状现在一般都是配合webpack使用这几种预处理语言，需要先安装 编译器、对应 loader，然后再 module.rules 配置其具体规则基本语法less 基本语法属于 css 风格，而 sass，stylus 利用缩进，空格，换行来减少需要输入的 字符目前 scss, stylus 也可以支持 css 风格，用大括号 来书写 ...

git地址：开发一个psotcss插件节点类型postcss会将我们的css生成ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：css ast主要有3种父类型AtRule: @xxx的这种类型，如@screenComment: 注释Rule: 普通的css规则还有几个个比较重要的子类型：decl： 指的是每条具体的css规则rule：作用于某个选择器上的css规则集合这是test的地方的，不熟悉ast的可以先了解一下:css ast结构postCss操作方法postCss为我们提供了一些方便的操作方法遍历walk: 遍历所有节点信息，无论是atRule、rule、comment的父类型，还是rule、 decl的子类型walkAtRules：遍历所有的atRulewalkComments：遍历所有的注释节点walkDecls：遍历所以的属性walkRules：遍历所有的css代码块root.walkDecls(decl => { decl.prop = decl.prop.split(’’).reverse().join(’’);});postcss在遍历的过程中，会将当前遍历的对象的cell传给回调函数，该参数是对应的rule，decl或者comment等Constructor等构造函数的实例，根据遍历的节点不同，该实例可能会有如下属性：nodes: css规则的节点信息集合decl: 每条css规则的节点信息prop: 样式名，如widthvalue: 样式值， 如10pxtype: 类型source: 包括start和end的位置信息，start和end里都有line和* column表示行和列selector: type为rule时的选择器name: type为atRule时@紧接rule名，譬如@import ‘xxx.css’中的importparams: type为atRule时@紧接rule名后的值，譬如@import ‘xxx.css’中的xxx.csstext: type为comment时的注释内容同样还有继承的一些方法，给我操作css的， 比如操作每条具体css属性的declaration：afterbeforecleanRawsclonecloneAftercloneBeforeerrornextprevrawremovereplaceWithroottoStringwarnpostcss pluginpostcss插件如同babel插件一样，有固定的格式export default postcss.plugin(‘postcss-plugin-name’, function (opts) { opts = opts || {}; return function (root, result) { // 处理逻辑 };});注册个插件名，并获取插件配置参数opts返回值是个函数，这个函数主体是你的处理逻辑，有2个参数，一个是root，css ast的根节点。另一个是result，返回结果对象，譬如result.css，获得处理结果的css字符串，result.message包含组件里创建的warnings和自定义信息，result.warn()创造一个warning实例并将其加入到result.message中，result.warnings()获得所有创建过的warning。注意组件的异常信息处理，不要直接console，因为一些 postcss 处理器会过滤掉console的输出导致异常信息丢失，用node.warn或者node.error创造CssSyntaxError 实例，会自动带上源码中的位置信息帮助debug，加到异常信息队列里。直接调用postcss下的方法可以用postcss.parse来处理一段css文本，拿到css ast，然后进行处理，再通过调用toResult().css拿到处理后的css输出，在一些简单的处理中可以用这种方法。写在最后：想写一下的可以按照这里的指引，很详细https://github.com/postcss/postcss-plugin-boilerplate这是我写的一个将px转为vw的插件vw-by-px参考：http://api.postcss.orgpostcss-pixel-to-viewport

写在前面的话前端工程化日益成熟今天，我们对于工具越来越深的封装。不管是从vue-cli的3.0版本起，还是umi、bigfish 等前端脚手架，对于webpack都封装在内，对于工程化无疑是高效的，但也在一定程度上让新手们者失去了从零配置一个项目的机会，所以很多时候还是希望能透过大神们的框架，研究一下底层结构。简介PostCSS是一个通过JS插件转换样式表的工具，它本身并不是一门新的CSS语言，而是一个平台或者是生态心态，提供插件扩展服务即JS API，开发者可以根据这些接口，定制开发插件，目前比较流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。工作流大致步骤：将CSS解析成抽象语法树(AST树)将AST树”传递”给任意数量的插件处理将处理完毕的AST树重新转换成字符串在PostCSS中有几个关键的处理机制：Source string → Tokenizer → Parser → AST → Processor → StringifierTokenizer将源css字符串进行分词举个例子：.className { color: #FFF; }通过Tokenizer后结果如下：[ [“word”, “.className”, 1, 1, 1, 10] [“space”, " “] [”{", “{”, 1, 12] [“space”, " “] [“word”, “color”, 1, 14, 1, 18] [”:", “:”, 1, 19] [“space”, " “] [“word”, “#FFF” , 1, 21, 1, 23] [”;", “;”, 1, 24] [“space”, " “] [”}", “}”, 1, 26]]以word类型为例，参数如下：const token = [ // token 的类型，如word、space、comment ‘word’, // 匹配到的词名称 ‘.className’, // 代表该词开始位置的row以及column，但像 type为space的属性没有该值 1, 1, // 代表该词结束位置的row以及column， 1, 10]Parser经过Tokenizer之后，需要Parser将结果初始化为ASTthis.root = { type: ‘root’, source: { input: {css: “.className { color: #FFF; }”, hasBOM: false, id: “<input css 1>”}, start: { line: 1, column: 1 } , end: { line: 1, column: 27 } }, raws:{after: “”, semicolon: false} nodes // 子元素}Processor经过AST之后，PostCSS提供了大量JS API给插件用Stringifier插件处理后，比如加浏览器前缀，会被重新Stringifier.stringify为一般CSS。结语PostCSS更多的是提供平台能力，赋能js的处理。 ...

在项目中使用 less 在 src/assets/ 下新建 common.less ：body{ background: #fafafa; padding: 20px;}在 main.js 中引入 common.less ：import ‘./assets/style/common.less’安装 less-loader：npm i less-loader -D添加 rules： { test: /.less$/, use: [ ‘style-loader’, ‘css-loader’, ’less-loader’ ] }打包之后，在浏览器打开 dist/index.html，less文件中的样式已经通过 style 标签载入了： 2. 使用MiniCssExtractPlugin我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入CSS文件的方式实现呢？这就需要使用一个插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已经不再支持ExtractTextWebpackPlugin的正式版，而测试版本又不够稳定，因此我们使用MiniCssExtractPlugin替代。首先安装：npm install –save-dev mini-css-extract-plugin在webpack.config.js 中引入并添加 plugins ：const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)new MiniCssExtractPlugin({ filename: “[name].css” }), 修改 CSS 和 less 的 rules：{ test: /.css$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’ ] }, { test: /.less$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’, ’less-loader’ ] }npm run build 之后，可见head中引入了一个 main.css 文件： 也正是我们在 common.less 和 modal.css 中的代码 3. postcss-loaderpostcss-loader 可以帮助我们处理CSS，如自动添加浏览器前缀。npm i -D postcss-loader autoprefixer在根目录下创建 postcss.config.js：const autoprefixer = require(‘autoprefixer’)module.exports = { plugins: [ autoprefixer({ browsers: [’last 5 version’] }) ]}修改 css 和 less 的 rules：{ test: /.css$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, { loader: ‘css-loader’, options: { importLoaders: 1 } }, ‘postcss-loader’ ] }, { test: /.less$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’, ‘postcss-loader’, ’less-loader’ ] }在 modal.css中加入：.flex{ display: flex;}打包之后打开 main.css，可见浏览器前缀已经加上了： 本人才疏学浅，不当之处欢迎批评指正

Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且，随着开发Web应用程序变得越来越普遍和差别细微化，我们经常寻找创造性的方法来弥合这些语言之间的差距，从而使我们的开发环境和工作流程更容易，更高效。最常见的示例通常是使用模板语言时。例如，可以使用一种语言来生成更详细的语言（通常是HTML）的代码。这是前端框架的关键作用之一 -操作HTML。这个领域最出名的就是JSX，因为它不是真正的模板语言;它是JavaScript的语法扩展，它使得使用HTML非常简洁。Web应用程序经历了许多状态组合，单独管理状态通常很有挑战性。这就是为什么CSS有时会被淘汰的原因 - 即使通过不同的状态和媒体查询管理样式同样重要且同样具有挑战性。在这个由两部分组成的系列中，我想将CSS放在聚光灯下，并探索弥合它与JavaScript之间的差距。在本系列中，我将假设您正在使用像webpack这样的模块解析器。因此，我将在我的示例中使用React，但相同或类似的原则适用于其他JavaScript框架，包括Vue。CSS领域正朝着多个方向发展，因为要解决许多挑战并且没有“正确”的路径。我一直在花费大量精力尝试各种方法，主要是在个人项目上，所以这个系列的目的只是告知，而不是给你解决方案。CSS的挑战在深入研究代码之前，有必要解释Web应用程序样式化方面最显着的挑战。 我将在本系列中讨论的是范围，条件和动态样式以及可重用性。作用域作用域定是众所周知的CSS挑战，它的目的是编写不会影响到组件外部的样式，从而避免意外的副作用。 我们希望在不影响编码体验的情况下实现功能。条件和动态样式虽然前端应用程序中的状态开始变得越来越先进，但CSS仍然是静态的。 我们只能有条件地应用样式集 - 如果按钮是主要的，我们可能会应用“primary”类并在单独的CSS文件中定义它的样式以应用它在屏幕上的样式。 有几个预定义的按钮变化是可管理的，但如果我们想要有各种按钮，如为Twitter，Facebook，Pinterest定制的特定按钮，可能还会有其他很多种？ 我们真正想要做的只是传递颜色并使用CSS定义状态，如悬停，焦点，禁用等。这称为动态样式，因为我们不再在预定义样式之间切换 - 我们不知道接下来会发生什么。 可能会想到内联样式来解决此问题，但它们不支持伪类，属性选择器，媒体查询等。可重用性重用规则集，媒体查询等是我最近很少看到的一个主题，因为它已经被Sass和Less等预处理器解决了。 但是我仍然想在这个系列中再次提起它。我将列出一些处理这些挑战的技术以及它们在本系列的两个部分中的局限性。 没有任何技术优于其他技术，它们甚至不相互排斥; 您可以选择一个或组合它们，具体取决于您的决定是否能改善您的项目质量。开始吧我们将使用名为Photo的示例组件演示不同的样式技术。 我们将呈现可能具有圆角的响应式图像，同时将替代文本显示为标题。 它会像这样使用：<Photo publicId=“balloons” alt=“Hot air balloons!” rounded />在构建实际组件之前，我们将抽象出srcSet属性以保持示例代码简洁。 那么，让我们创建一个带有两个实用程序的utils.js文件，用于使用Cloudinary生成不同宽度的图像：import { Cloudinary } from ‘cloudinary-core’const cl = Cloudinary.new({ cloud_name: ‘demo’, secure: true })export const getSrc = ({ publicId, width }) => cl.url(publicId, { crop: ‘scale’, width })export const getSrcSet = ({ publicId, widths }) => widths .map(width => ${getSrc({ publicId, width })} ${width}w) .join(’, ‘)我们设置Cloudinary实例以使用Cloudinary的演示云名称，以及根据指定选项为图像publicId生成URL的url方法。 我们只对修改此组件的宽度感兴趣。我们将分别将这些实用程序用于src和srcset属性：getSrc({ publicId: ‘balloons’, width: 200 })// => ‘https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons'getSrcSet({ publicId: ‘balloons’, widths: [200, 400] })// => ‘https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons 200w, https://res.cloudinary.com/demo/image/upload/c_scale,w_400/balloons 400w’如果你不熟悉srcset和sizes属性，我建议先阅读一下有关响应式图像的内容。 这样，您可以更轻松地按照示例进行操作。CSS-in-JSCSS-in-JS是一种样式方法，它将CSS模型抽象到组件级别，而不是文档级别。 这个想法是CSS可以限定为特定组件 - 并且只限于该组件 - 以使这些特定样式不与其他组件共享或泄露到其他组件，并且仅在需要时才调用。 CSS-in-JS库通过在<head>中插入<style>标签在运行时创建样式。使用这个概念的第一个库是JSS。 以下是使用其语法的示例：import React from ‘react’import injectSheet from ‘react-jss’import { getSrc, getSrcSet } from ‘./utils’const styles = { photo: { width: 200, ‘@media (min-width: 30rem)’: { width: 400, }, borderRadius: props => (props.rounded ? ‘1rem’ : 0), },}const Photo = ({ classes, publicId, alt }) => ( <figure> <img className={classes.photo} src={getSrc({ publicId, width: 200 })} srcSet={getSrcSet({ publicId, widths: [200, 400, 800] })} sizes="(min-width: 30rem) 400px, 200px" /> <figcaption>{alt}</figcaption> </figure>)Photo.defaultProps = { rounded: false,}export default injectSheet(styles)(Photo)乍一看，样式对象看起来像用对象表示法编写的CSS，带有附加功能，比如传递一个函数来设置基于props的值。 生成的类是唯一的，因此您永远不必担心它们与其他样式冲突。 换句话说，你可以自由的使用作用域！ 这就是大多数CSS-in-JS库的工作方式 - 当然，我们将在功能和语法方面进行一些改进。您可以通过属性看到渲染图像的宽度从200px开始，然后当视口宽度变为至少30rem时，宽度增加到400px宽。 我们生成了额外的800宽度，以覆盖更大的屏幕密度：1x screens 使用 200 and 4002x screens 使用 400 and 800styled-components是另一个CSS-in-JS库，但是使用更熟悉的语法巧妙地使用模板文字而不是对象看起来更像CSS：import React from ‘react’import styled, { css } from ‘styled-components’import { getSrc, getSrcSet } from ‘./utils’const mediaQuery = ‘(min-width: 30rem)‘const roundedStyle = css border-radius: 1rem;const Image = styled.img width: 200px; @media ${mediaQuery} { width: 400px; } ${props =&gt; props.rounded &amp;&amp; roundedStyle}; const Photo = ({ publicId, alt, rounded }) => ( <figure> <Image src={getSrc({ publicId, width: 200 })} srcSet={getSrcSet({ publicId, widths: [200, 400, 800] })} sizes={${mediaQuery} 400px, 200px} rounded={rounded} /> <figcaption>{alt}</figcaption> </figure>)Photo.defaultProps = { rounded: false,}export default Photo我们经常创建语义中性元素，如<div>和<span>，仅用于样式目的。这个库以及许多其他库允许我们在一个动作中创建和设置它们。我最喜欢这种语法的好处是它就像常规的CSS，减去插值。这意味着我们可以更轻松地迁移CSS代码，并且我们可以使用现有的css知识，而不必熟悉在对象语法中编写CSS。请注意，我们可以在我们的样式中插入几乎任何东西。此特定示例演示了如何将媒体查询保存在变量中并在多个位置重用它。响应式图像是一个很好的用例，因为sizes属性基本上包含CSS，所以我们可以使用JavaScript来使代码更简洁。假设我们决定在视觉上隐藏字幕，但仍然可以让屏幕阅读器访问它。我知道实现这一目标的更好方法是使用alt属性，但为了这个例子，让我们使用不同的方式。我们可以使用一个名为polished的样式mixin库 - 它适用于CSS-in-JS库，非常适合我们的示例。这个库包含一个名为hideVisually的mixin，它正是我们想要的，我们可以通过插入它的返回值来使用它：import { hideVisually } from ‘polished’const Caption = styled.figcaption ${hideVisually()};<Caption>{alt}</Caption>即使hideVisually输出一个对象，样式组件库也知道如何将其作为样式进行插值。CSS-in-JS库具有许多高级功能，如主题，供应商前缀甚至内联关键CSS，这使得完全停止编写CSS文件变得容易。 此时，您可以开始了解为什么CSS-in-JS成为一个诱人的概念。缺点和局限CSS-in-JS的明显缺点是它引入了一个运行时：需要通过JavaScript加载，解析和执行样式。 CSS-in-JS库的作者正在添加各种智能优化，如Babel插件，但仍然存在一些运行时成本。同样重要的是要注意PostCSS没有解析这些库，因为PostCSS不是设计用于运行时的。许多人使用stylis作为结果，因为它更快。这意味着我们遗憾的是无法使用PostCSS插件。我要提到的最后一个缺点是工具。 CSS-in-JS正在以非常快的速度发展，文本编辑器扩展，linters，代码格式化等等需要追赶新功能以保持同等水平。例如，人们正在使用VS Code扩展样式组件来表示类似情感的CSS-in-JS库，即使它们并非都具有相同的功能。我甚至看到提议功能的API选择受到保留语法突出显示的目标的影响！未来有两个新的CSS-in-JS库，Linaria和astroturf，它们通过将CSS提取到文件中来管理零运行时。 它们的API类似于样式组件，但它们的功能和目标各不相同。Linaria的目标是通过内置函数（如作用域，嵌套和供应商前缀）来模仿CSS-in-JS库的API，如样式组件。 相反，astroturf是基于CSS模块构建的，具有有限的插值功能，并鼓励使用CSS生态系统而不是使用JavaScript。结论CSS-in-JS是一体化的样式解决方案，用于弥合CSS和JavaScript之间的差距。 它们易于使用，并且包含有用的内置优化 - 但所有这些都需要付出代价。 最值得注意的是，通过使用CSS-in-JS，我们基本上从CSS生态系统中退出并使用JavaScript来解决我们的问题。零运行时解决方案通过恢复CSS工具来缓解一些缺点，这些工具将CSS-in-JS讨论提升到更有趣的水平。 与CSS-in-JS相比，预处理工具的实际限制是什么？ 这将在本系列的下一部分中介绍。 ...