https://majunchang.github.io/mi.vant/#/quickStart
安装antd-mobile 全局引入 npm install antd-mobile --save 在App.js引入css import 'antd-mobile/dist/antd-mobile.css'; 在jsx使用antd组件 import React from 'react'; import { Button } from 'antd-mobile'; const index = () => { return ( <Button typ03
近期我正在尝试完成所谓的「拐角轮播」,目前稍有收获(虽然拐角部分完成的并不是很好)
使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置后魔改。但是,eject 是不可逆操作,弹出配置后,你将无法跟随官方的脚步去升级项目的 react-script 版本。
在 html 里指定 class,然后在 css 里定义这个 class 的样式。
npx-cli.js –ignore-existing create-react-app . –scripts-version –typescript
storybook组件需要全局样式,只需在.storybook/preview.js 增加全局样式即可。
最近公司需要给多个 webapp(大概20+)加上多皮肤的功能,原先默认是白色皮肤,我们先从暗黑模式入手,从而逐渐实现多皮肤功能。本篇记录下实现思路。
最近公司需要给多个 webapp(大概 20+)加上多皮肤的功能,原先默认是白色皮肤,我们先从暗黑模式入手,从而逐渐实现多皮肤功能。本篇记录下实现思路。
Hi 大家好我是 ssh,在公司项目中,我们编写组件文档支持都是用的 Storybook,总体来说体验很好,当然我也遇到了一些问题,比如说依赖容易安装失败或编译失败,需要深度配置 webpack 等等,这两天看到 Storybook 宣布它们发布了 7.0 版本,而且据他们说是一次最重大的更新。看起来好像解决了很多我在使用过程中的痛点,下面我来和大家一起分享 Storybook 7.0 - Next-level component development and testing:
开发移动端页面,我们通常都会按照一个固定宽度的设计稿来做,但是实际上的手机屏幕尺寸五花八门,如果不进行适配的话会比较影响使用体验。
大家好,我是柒八九。从今天起,我们又双叒叕yòu shuāng ruò zhuó, 开辟了一个新的领域:「前端工程化」。可能大家对这个词,比较陌生,但是如果把这个问题具象化,那就会感觉到倍感亲切。我简单罗列几个概念和技术
在上一篇文章 《手摸手教你封装跨项目复用的 Vue 组件》 中,介绍了一例用 rollup.js 封装 Vue.js 组件库的实践;限于篇幅和复杂度,其中组件的即时调试预览部分,也同样采用了 rollup 一并配置出来,虽然完全够用,但运行起来稍嫌麻烦,bigger 上感觉也差强人意。
第三方JS插件在日常开发中经常会使用到。对于一些不涉及到展示的功能插件,仅需要引入一个js文件即可,但对于一些界面级插件,如轮播图、富文本编辑器等,往往还需要单独引入css文件使之展示正常。但由于CSS存在覆盖问题,即使遵循某些规范(如BEM),仍然不可忽视。
不久前,我写了“I’m Excited About PostCSS, But I’m Scared to Leave Sass”。从那时起,我全心全意地拥抱PostCSS(离开Sass,至少暂时性的)。我已经在大型项目中使用PostCSS,贡献和创作插件,与维护人员沟通,了解更多可能。这一切都很顺利,十分顺利。
笔者近期在将前端架构 webpack 升级到 5 时,一些配套模块也需要进行升级,其中包括了 css 处理模块 PostCSS。旧版本使用的是 PostCSS 7,在升级至 PostCSS 8 的过程中,笔者发现部分插件前置依赖还是停留在 7 版本,且年久失修,在 PostCSS 8 中出现各种各样的问题,无奈只能研究源码,将目前部分旧版本插件升级至新版本。这里,笔者将升级插件的过程进行简化和提炼,让读者自己也可以编写一个 PostCSS 8 插件。
命令行运行: npm install -g npm npm就自动为我们更新到最新版本
👆点击“博文视点Broadview”,获取更多书讯 在前端基础建设中,对样式方案的处理是必不可少的。 在本文中,我们将实现一个工程化主题切换功能,并梳理现代前端样式的解决方案。 1 设计一个主题切换工程架构 随着iOS 13引入深色模式(Dark Mode),各大应用和网站也都开始支持深色模式。相比于传统的页面配色方案,深色模式具有较好的降噪性,也能让用户的眼睛在看内容时更舒适。 那么对于前端来说,如何高效地支持深色模式呢? 这里的高效就是指工程化、自动化。在介绍具体方案前,我们先来了解一个必会的前端工
回归正题,postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构
什么是属性前缀 为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 例如:
前面我们已经讲了 webpack 对 css、less 文件的处理,和处理 less 文件类似,处理 sass、stylus 也只需安装对应的工具再进行配置即可,具体可以查看官方文档:webpack.js.org/loaders/sas… 以及 webpack.js.org/loaders/sty… 。
原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像 Twitter,Google,BBC 使用的一样,我打算对 CSS 后处理器 PostCSS 的世界一探究竟。 PostCSS是什么? PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情,你需要安装一些 plugins 才能开始工作。这不仅使其模块化,同时功能也会更强。 它的工作原理就是
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
相比较react,vue所需要的插件要少得多,我们知道在vue中,大多数是以.vue的模版组件,因此关键是我们可以用webpack的相关loader能够解析.vue文件即可,在vue项目中解析单文件组件,热加载,css作用域等全部依赖于这个插件vue-loader[1],因此vue-loader算是vue工程化中必不可少的一个插件。
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
前提 *create-react-app 创建的项目 通过 eject 命令暴露出react 全部配置 安装配置 postcss-pxtorem npm i postcss-pxtorem -D 添加rem转换插件 webpack.config.js //104行 require('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*'], }) 排错 使用less css文件为什么
postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件,经过半年持续迭代,现已稳定用在旗下两款产品的Web 业务中。其与市面上的雪碧图插件不同在于生成雪碧图的“懒惰”姿势。 前言 前端界,伴随着雪碧图这个概念出现,自动化产生雪碧图这类工具就层出不穷。无论是早期GUI 工具,还是现在流行的配合Gulp/Grunt/Webpack 这类构建工具而产生的雪碧图插件。总之是百花齐放,长江后浪推前浪,后浪死在沙滩上。 根据输入方式的不同,现在市面上基于Node.js
参考链接: postcss-loader webpack css-loader
JavaScript转换样式的工具。让css样式适配不同的浏览器(不用自己去手动的添加了)。
前阵子为了满足工作上的一个需求开发了一个PostCSS 插件,后来也将这个插件提交给PostCSS 官方并得到认可。在这篇文章中笔者将记录开发过程中遇到的一些问题,且斗胆将之称为“最佳实践”,希望对有兴趣尝试PostCSS 插件开发的您有所帮助。 简介篇 开发成果展示 首先先上成果:https://github.com/Jeff2Ma/postcss-lazyimagecss (欢迎给个star 哦~) postcss-lazyimagecss 插件实现的功能是为 CSS 中的background-imag
图片 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来,其代码、依赖包及目录结构部分均有所更改,更多详细内容,敬请参考
写react和传统的js差不多。只是有一个设计思想贯穿了整个框架。用一个公式来表达就是:
TypeScript 约定了 tsconfig.json 文件来存储项目配置,文档链接。
使用最新的 CSS 特性,并编译为就浏览器兼容的语法,类似于 babel preset env 安装:
CSS 的隔离主要有两类方案,一类是运行时的通过命名区分,一类是编译时的自动转换 CSS,添加上模块唯一标识。
今天在吃早饭的时候就被同事@,说有一块页面效果在测试服务器的部署效果跟本地不一样:代码在本地运行没有问题,部署后发现有一个分割线的位置明显不对。来到公司后看了同事的演示,觉得可能是 css 代码压缩时出现了问题。
完整高频题库仓库地址:https://github.com/hzfe/awesome-interview
原创不易,未经作者允许禁止转载!! 认识Loader Loader可以用于对模块的源代码进行转换; 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须定制对应的loader来完成这个功能。 loader配置方式 内联方式:import "css-loader!../css/index.css"; loader和文件路径用!分隔 配置方式:webpack.config.js 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息 module.rules中允许我
去年同期写过一个基于 Node 的 DevOps 系列,但是整个项目工程非常大,上手成本比较高,对于一些「中小型团队或者新手」参考的意义不算多,所以针对这些群体重启了一个新的工程化系列。
我第一感觉看到官网的介绍时,我寻思这不就是一个包含了很多样式的样式表吗,和以前 bootstrap 这种那样,他自带了很多样式,完了之后你直接用他自带的就行了。
本期给大家在webpack5中如何配置css用到的解析和插件的使用,更准确的说是PostCSS的插件。众所周知,现在大部分前端项目都在使用webpack做打包,打包做解析的比较重要目的一个是给js做转化,比如es6转es5,混淆压缩等。然后就是对css进行解析,比如说scss转css,less转css,前缀自动补全,还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全,px转rem,px转vw,这都是在PostCSS中极为常用的插件。
来到这家公司之后,一直在使用webpack,也写了不少笔记,但是都比较零散,现在决定整理一下webpack相关的知识点,由浅入深,方便自己后续查漏补缺,后续会一直更新。
跨年前两天,Dan Abramov在Twitter上提了一个问题: JS社区毫不犹豫的抛出了它们对于新技术的预期与期待,本文内容也是总结自Twitter的回复,按照流行度降序排列。有一个尚未确定的小
随着Vue.js越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经验的开发人员从其他框架(React和Angular)很方便的入手。
首先,这里说的迁移并不代表这两个技术的优劣,其次也不代表它们是矛盾不相容的,相反它们搭配使用是很棒的。
rem 相对于根元素 <html> 的 font-size 的大小来计算坐作为一个单位;simple-flexible 是根据手淘团队 lib-flexible.js,比较,改写的一个插件,兼容 UC 竖屏转横屏出现的 BUG,自定义视觉设计稿的宽度:designWidth,设定最大宽度:maxWidth 这里有 simple-flexible 的 Github 地址,下载下来用即可;
本文适用于所有前端开发人员。文章会介绍 PostCSS 的主功能实现原理,不是介绍 api,也不会介绍所有功能的原理,如果有需要了解全部功能或者查阅 API,可查看官方文档:https://postcss.org/api/。
借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1...无缝过渡
相信看到这篇文章的人,都是对Electron感兴趣的, 网上关于Electron的教程其实已经不少了,但是大多都是一些功能点的实现,对于从零开始搭建一个适合自己的项目,估计还是有不少人有点懵逼的。刚好自己也学习Electron一段时间了,想着整理一下自己学习期间的一些笔记和踩坑的地方,从零开始编写一个小项目。一个由浅入深(或者说从入门到放弃)的套路,一步步带你敲代码实现一个小项目,希望能给大家带来一点点启发。
插件(Plugins) 插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。 Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。 Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。 使用插件的方法 要使用某个插件,我们需要通过npm安装它,然后
领取专属 10元无门槛券
手把手带您无忧上云