PostCSS和汇总 - 腾讯云开发者社区

文章/答案/技术大牛

发布

webpack postcss

postcss postcss是什么？有什么用？ JavaScript转换样式的工具。让css样式适配不同的浏览器(不用自己去手动的添加了)。...安装postcss npm i postcss-cli -D autoprefixer 网址如下，它将左侧的css进行了多个浏览器版本的兼容。...比如transition就没有添加前缀为-webkit-transition 然后我们尝试着用postcss进行处理 -o也就是output 然后我们要输出成的文件操作的文件 npx postcss...安装postcss-loader，其内部又是使用了postcss的。...因此顺序是'postcss-loader'在最右边。

6652 0

PostCSS概述

这种基于插件的架构使得PostCSS具有极高的灵活性和可扩展性。插件系统PostCSS的核心优势在于其丰富的插件生态系统。...命令行使用安装PostCSS及所需插件后，通过postcss命令处理CSS文件：npm install -D postcss-cli autoprefixer cssnano precssnpx postcss...使用postcss --config path/to/config.js命令测试独立的PostCSS配置文件。3. 自定义插件开发PostCSS提供完善的API供开发者编写自定义插件。...总结PostCSS凭借其插件化架构、强大的CSS处理能力和广泛的工具集成，已成为现代前端开发不可或缺的一部分。...通过理解PostCSS的工作原理、正确配置和使用插件、集成至构建工具以及编写自定义插件，开发者可以有效避免常见问题，提升CSS开发效率与代码质量。

9520 0

您找到你想要的搜索结果了吗？

是的

没有找到

PostCSS 初识

因为在代码压缩时，相同的代码会默认选择比较靠后的，因此 display: -ms-flexbox; -ms-flex-direction: column;，而 -ms-flexbox 和 -ms-flex-direction...解决方案首先安装 webpack 插件 postcss-loader 和 autoprefixer $ npm i autoprefixer postcss-loader --save-dev 然后修改...less-loader' }) } 注意 postcss-loader 应该放在 less-loader 和 css-loader 之间，处理顺序为: less-loader -> postcss-loader...（3）global css 终结者 PostCSS 通过 CSS Modules 对 css 命名做模块化处理，一般为添加前缀和后缀，让我们写 css 的时候不必担心命名太通用，只要觉得有意义即可。...添加 PostCSS Loader 到 webpack.config.js 中，记得要把它放在 css-loader 和 style-loader 后面，如果有其它 loader，如 sass-loader

8534 0

PostCSS | 笔记

创建项目 mkdir postcss-notebook cd postcss-notebook yarn init -y 图片 index.html postcss postcss-cli npx postcss style.css -o dist.css 会发现生成了 dist.css index.html...支持配置文件: postcss.config.js postcss.config.js module.exports = { plugins: [require("autoprefixer")],...}; 再运行，不用 -u 了： npx postcss style.css -o dist.css PostCSS Preset Env 使用最新的 CSS 特性，并编译为就浏览器兼容的语法，类似于...【13 分钟掌握 PostCSS】 PostCSS 入门教程 - 峰华前端工程师 postcss/postcss-cli: CLI for postcss postcss/postcss: Transforming

6292 0

PostCSS 插件postcss-lazyimagecss：自动填写width height 属性

postcss-lazyimagecss 是Jeff 基于gulp-lazyimagecss 开发的一个PostCSS 插件，实现的功能是在CSS 中自动添加width / height 属性。...项目地址：https://github.com/Jeff2Ma/postcss-lazyimagecss （欢迎给个star！）...安装使用 npm install postcss-lazyimagecss --save-dev 在Gulp 中使用： var gulp = require('gulp'); var postcss...= require('gulp-postcss'); var lazyimagecss = require('postcss-lazyimagecss'); gulp.task('css', function...更多更多请查看项目主页 https://github.com/Jeff2Ma/postcss-lazyimagecss 最后感谢hzlzh and littledu 提供的灵感及思路。

1.4K8 0

PostCSS原理解析

简介 PostCSS是一个通过JS插件转换样式表的工具，它本身并不是一门新的CSS语言，而是一个平台或者是生态心态，提供插件扩展服务即JS API，开发者可以根据这些接口，定制开发插件，目前比较流行的插件工具如...工作流大致步骤：将CSS解析成抽象语法树(AST树) 将AST树”传递”给任意数量的插件处理将处理完毕的AST树重新转换成字符串在PostCSS中有几个关键的处理机制： Source string...{after: "", semicolon: false} nodes // 子元素 } csstree，这个是另外一个只做CSS转AST的库，附上Demo Processor 经过AST之后，PostCSS...结语 PostCSS更多的是提供平台能力，赋能js的处理。

9713 0

展望未来：使用 PostCSS 和 cssnext 书写 CSS

预处理和后处理到底是什么？为了用简单的方式解释预处理和后处理的不同，我将以单位转换为例。...cssnext 是一个 PostCSS 的包，其中包含了大量的特性组件，比如 custom properties 和 custom selectors： /* custom properties */...这只是你可以用 PostCSS 实现的一个小例子。希望你能够看到它的强大之处以及和预处理器的不同。我建议你阅读文档以及插件列表，了解哪些东西可以在你的项目中使用。...出于好奇，我在 10000 个选择器的 5 个属性上使用上述 Sass 函数和 PostCSS 函数，也就是处理 50000 次，以下是对比结果。 Libsass 3.2 ? PostCSS ?...如果你喜欢冒险的话，我肯定推荐你试一试 PostCSS。我很乐意听到任何人在实际项目中使用 PostCSS 的想法和经验。请与我保持联系！

1.2K9 0

是时候学习PostCSS了

因为如果您认为PostCSS只是Sass和Less的替代品，那您可能被骗了。我不知道我可以做什么来鼓励情况1 … 一些安慰的话，教练式的鼓励，温柔的激励，和远景？...PostCSS模块化的几个启示 ☞ 相对于Sass和Less预处理器，试图主张PostCSS是“后处理器”的做法是错误的。...不管您怎样定义“后处理器”和“预处理器”，PostCSS的插件总会两个阵营都有。...所以，PostCSS不是教导您如何写以后版本的CSS（从议案角度提出语法和功能），而是提供闭环、基础条件和其他类似于Sass的特性。...（冒着听起来荒谬和浮夸的风险……）对于许多设计师和前端开发人员，我建议，想要真正地学习PostCSS应该弄清楚CSS的处理过程。

8982 0

如何迁移 Sass 到 PostCSS

迁移前提如果你打算把 Sass 迁移到 PostCSS，那么在迁移之前有些事是必须要考虑的：首先，先问下自己为什么要迁移？值不值这么做很重要。...其次，你对 PostCSS 的插件机制一定要深入了解，因为整个迁移过程肯定会出现问题。然后如果决定迁移，先调查下自己或团队的 Sass 使用习惯，然后对比 PostCSS 的实现。...一种是平稳迁移，保持 Sass 的风格不变（如变量、mixin等）；另一种就是全部换成 PostCSS 格式。相对来说老的大项目建议使用平稳迁移，不然时间成本太大。...迁移步骤 1、确定使用什么构建 webpack：postcss-loader(推荐使用) gulp：gulp-postcss 2、挑选 PostCSS 插件首先统计常用 Sass 功能，查找对应的 PostCSS...3、相关配置配置 webpack 的 postcss-loader 配置 postcss.config.js 文件给编辑器添加语法高亮配置 stylelint 验证 4、迁移将以前的 .scss

1.4K2 0

PostCss学习笔记，持续记录

scoped 的方案是添加的 data-xxx 属性选择器，因为 data-xx 是编译时自动生成和添加的，开发者感受不到。...PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。 PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。...viewportWidth: 320,//设计稿的视口宽度 unitPrecision: 5,//单位转换后保留的精度 propList: ['*'],//能转化为vw的属性列表,支持*和!...，只有大于1的值会被转换 mediaQuery: false,//媒体查询里的单位是否需要转换单位 replace: true,//是否直接更换属性值，而不添加备用属性 /*exclude和include...unitPrecision: 5, propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//能转化为vw的属性列表,支持*和!

9371 0

【实战】基于 babel 和 postcss 查找项目中的无用模块

我们可以在遍历的过程中把模块信息和模块之间的关系以对象和对象的关系保存，构造成一个依赖图（因为可能有一个模块被两个模块依赖，甚至循环依赖，所以是图）。...我们使用 postcss 来做：读取文件内容根据文件路径是 .less、.scss 来决定是否启用 less、scss 的语法插件使用 postcss.parse 把文件内容转成 AST 遍历 @...moduleFileConent = fs.readFileSync(curModulePath, { encoding: 'utf-8' }); const ast = postcss.parse...模块遍历要对 js 模块和 css 模块做不同的处理：js 模块分析 import 和 require，css 分析 url() 和 @import。之后要对分析出的路径做处理，变成真实路径。...我：不同的模块有不同的处理方式，比如 js 模块，就要通过 import 或者 require 来确定子模块，而 css 则要通过 @import 和 url() 来确定。

8202 0

vue3.0中使用postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。...前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem...1.安装依赖 npm install postcss-pxtorem -D 2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件） module.exports...= { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem

3.7K1 0

postcss-loader 有什么用?

回归正题,postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。...插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的...从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。...和 LESS 等进行类比。...因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

1.8K3 0

浅谈fis3与postcss

install [-g] fis3-hook-relative 绝对路径转化成相对路径的配置文件 fis.hook(‘relative’) fis.match(‘**’,{relative:true}) postcss...结合fis3使用 // fis3 的 postcss 插件中 fis中postcss的配置文件 fis.match('*.css', { postprocessor: fis.plugin('postcss...*\/[a-zA-Z0-9]+\.scss$/,{ postprocessor: fis.plugin('postcss') }); Postcss的插件 Autoprefixer 也仅仅是 PostCSS...sublime补全语法插件 sublime-autoprefixer-master postcss还有一个px转化成rem的插件， postcss安装px转化成rem的插件（用fis3构建工具） npm

1.1K4 0

面试和笔试汇总

最近忙着找工作，也没有更新博客，今天一个朋友让我赶紧把博客更新下，说说最近的面试情况也可以好给他们一个参考，这就整理出来给大家分享~~ 笔试题目公开 get和post的区别用php以及js和html写出来跳转语句...函数isset和empty的区别定义一个类，要求有三个属性，并输出内容用js代码或者你熟悉的js类库书写一段代码实现复选框的全选、反选、全不选用js编写trim函数简单描述cookie和session...主键和索引简单说说定义和用途 ajax数据返回都有那些格式？之间的区别是什么？ linux下一个工作目录a，然后我去b操作一次之后我想回到a怎么搞？...3、hr面试（我第一次都栽这里了），hr和技术面试的综合评分才能决定你是否被录用。除非你的技术很牛，连老总都不忍心让你走！ 4、说几个比较常见的问题为何选择我们公司？...看官路过就可以~~ 谢谢那些一直关心和支持Joyous的人们。谢谢你们

1.2K6 0

React引入antd-mobile+postcss搭建移动端

引入postcss px转rem npm install lib-flexible postcss-px2rem-exclude --save index.js导入 import 'lib-flexible...libraryName: 'antd-mobile', style: 'css', }), addPostcssPlugins( [require("postcss-px2rem-exclude...modifyVars: { "@brand-primary": "#1DA57A" }, //自定义主题 }), addPostcssPlugins( [require("postcss-px2rem-exclude

1.7K3 0

Mac 下解决 zsh: no matches found: postcss@^7

mac开发引入 tailwindcss 库时遇到如下错误： zsh: no matches found: postcss@^7 可以这样解决： # 官网给出的命令如下 npm install -D tailwindcss...@npm:@tailwindcss/postcss7-compat postcss@\^7 autoprefixer@\^9 # mac的zsh中需要这样，因为错误的 ^ 解析 npm install...-D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 参考文献# zsh: no matches found...: HEAD^ #449 zsh: no matches found: postcss@^7 #3575 注：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

7985 0

react 移动端项目配置 postcss-pxtorem

前提 *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文件为什么rem转换没有生效， create-react-app 的postcss配置都在getStyleLoaders...npm i postcss-pxtorem -D 添加rem转换插件 webpack.config.js //104行 require('postcss-pxtorem')({ rootValue...selectorBlackList : [], //过滤 propList : ['*'], }) 排错使用less css文件为什么rem转换没有生效， create-react-app 的postcss

5.1K10 9

postcss-px-to-viewport之vw、vh、rem

取的是vw和vh最大最小计算。先使用rem，之前用的是淘宝的flexible.js，会帮你动态的根据屏幕大小计算html的font-size。...我对比了用flexible.js的项目，和这样使用，html的font-size是一模一样。只不过这样使用还需要单位换算插件。...有点跑偏了，主要想分享postcss-px-to-viewport的使用。...先安装： npm install postcss-px-to-viewport --save-dev 新建postcss.config.js文件，然后配置： module.exports = { plugins...: 5, } } } 配置项有很多，可以自行查看，还能配置不转换之类的： https://github.com/evrone/postcss-px-to-viewport/blob/HEAD

2.2K3 0

如何编写属于自己的 PostCSS 8 插件？

这里，笔者将升级插件的过程进行简化和提炼，让读者自己也可以编写一个 PostCSS 8 插件。 1 插件工作原理 PostCSS 是一个允许使用 JS 插件转换样式的工具。...开发者可以根据自己的实际需求，在编译过程将指定 css 样式进行转换和处理。...PostCSS 和插件的工作原理其实很简单，就是先将 css 源码转换为 AST，插件基于转换后 AST 的信息进行个性化处理，最后 PostCSS 再将处理后的 AST 信息转换为 css 源码，完成...3 实际开发一个 PostCSS 8 插件了解了 PostCSS 插件的格式和 API，我们将根据实际需求来开发一个简易的插件，有如下 css： .demo { font-size: 14px;...尽量使你的插件和使用者代码解耦，开放有限的 API，同时开发者在使用你的插件时从名字就可以知道插件的功能。

1.6K2 0

点击加载更多

webpack postcss

PostCSS概述

PostCSS 初识

PostCSS | 笔记

PostCSS 插件postcss-lazyimagecss：自动填写width height 属性

PostCSS原理解析

展望未来：使用 PostCSS 和 cssnext 书写 CSS

是时候学习PostCSS了

如何迁移 Sass 到 PostCSS

PostCss学习笔记，持续记录

【实战】基于 babel 和 postcss 查找项目中的无用模块

vue3.0中使用postcss-pxtorem

postcss-loader 有什么用?

浅谈fis3与postcss

面试和笔试汇总

React引入antd-mobile+postcss搭建移动端

Mac 下解决 zsh: no matches found: postcss@^7

react 移动端项目配置 postcss-pxtorem

postcss-px-to-viewport之vw、vh、rem

如何编写属于自己的 PostCSS 8 插件？

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐