什么是 PostCSS 官方文档介绍:https://www.postcss.com.cn PostCSS和sass/less不同, 它不是CSS预处理器。 PostCSS是一款使用插件去转换CSS的工具。 PostCSS有许多非常好用的插件。 例如: autoprefixer (自动补全浏览器前缀
1. { loader:"postcss-loader", options: { // 如果没有options这个选项将会报错 No PostCSS Config found plugins: (loader) => [ require('autoprefixer')(), //CSS浏览器兼容 ]
原创 2022-05-04 10:05:38
1350阅读
本篇文章介绍项目制作。
转载 2017-10-30 22:01:00
115阅读
2评论
一、安装依赖npm i -D postcss-loader npm install autoprefixer -D 二、webpack.config.js文件夹下添加 三、新建一个 .browserslistrc 文件defaults,not ie < 11,last 2 versions,> 1%,iOS 7,last 3 iOS versions 最后运行效果 
转载 2021-03-13 20:48:26
521阅读
2评论
entry: './entry-client',这里entry的编译路径是从编译脚本所在的当前路径在开始找的。 不是从当前webpack配置文件所在目录开始找的。比如这个webpack在build目录下,但是其实build.sh是和webpack同一级目录,entry-client是和build.sh同一级,所以这个要写上面的形式,从build.sh所在路径开始查找
原创 2022-07-11 10:41:55
140阅读
在 Web 应用开发中,CSS 代码的编写是重要的一部分。CSS 规范从最初的 CSS1 到现在的 CSS3,再到 CSS 规范的下一步版本,规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他 Web 领域的规范相似的处境是,CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在 CSS 规范的实现方面的进度也存在很大差异。另外,CSS 规范本身的发展速度与社
转载 2024-03-21 17:52:55
143阅读
解决方案: 只是换了一种引入方式,解决了 1,创建postcss.config.js文件,添加如下代码:(引入autoprefixer插件) 1 2 3 4 module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio
转载 2018-02-07 10:22:00
77阅读
2评论
PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。而使用PostCSS则需要与webpack或者parcel结合起来。 PostCss已经被很多公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件
原创 2021-07-19 16:26:50
148阅读
1.使用Can I Use中的值为CSS规则添加供应商前缀。​​Autoprefixer​​将使用基于当前浏览器流行度和属性支持的数据为您应用前缀。2.​​PostCSS Preset Env​​​允许您将现代CSS转换为大多数浏览器可以理解的内容,使用​​cssdb​​​根据目标浏览器或运行时环境确定所需的​​polyfill​​。3.​​CSS模块​​意味着你永远不必担心你的名字过于通用,只需
原创 2022-07-13 11:11:14
157阅读
问题内容:Syntax Error: Error: PostCSS plugin postcss-pxtor
原创 2022-09-13 12:19:46
1081阅读
一、postcss是什么? postcss是一个JavaScript 工具,可以用来转换 CSS 代码。postcss可以使用不同插件实现自动添加浏览器前缀,代码合并,代码压缩等等效果。二、postcss安装 安装:npm i postcss -g 1 npm i postcss-cli -g 1 运行指令:postcss 输入文件路径 -o 输出文件路径 1 后面添加 -w , 可以实时监听。三
原创 2023-07-31 14:43:24
272阅读
postcss.config.js 文件的数据格式问题在我配置vue项目时,需要用vue-loader配合postcss-loader做配置时,发现了本项目存在的一个问题:我在postcss.config.js中配置了parser:'postcss-scss',这里在未配置vue-loader之前,只有css,scss,less的rule有引用该配置,而且是通过options.config.pat
转载 2024-04-09 14:16:20
72阅读
1、项目结构 安装loader: 2、模板文件layer.tpl 3、layer.js 4、app.js 注意: 5、webpack.config.js 6、编译 7、结果
转载 2017-09-18 10:16:00
234阅读
2评论
我们本地开发的时候可以在node.env上定义变量,然后在使用webpack编译的时候根据本地的环
原创 2022-07-11 10:34:54
88阅读
1. webpack编译流程 初始化参数:从配置文件和Shell语句中读取与合并参数,得出最终的参数; 开始编译:用上一步得到的参数初始化Compiler对象,加载所有配置的插件,执行对象的run方法开始执行编译; 确定入口:根据配置中的entry找出所有的入口文件 编译模块:从入口文件出发,调用所
转载 2020-04-23 14:04:00
552阅读
2评论
webpack.config.js 只需要注意加大加粗的地方。 package.json 命令行执行 npm run dev 测试
转载 2017-02-16 19:32:00
171阅读
2评论
PostCSS提供完善的API供开发者编写自定义插件。插件是一个接受PostCSS处理器实例作为参数的函数,可在处理器的Once或Rule
原创 2024-05-09 13:52:21
143阅读
1、安装 flexible和 postcss-px2rem自适应的开发方式下,仍然可以如此:你在设计图上量到的像素(px)是多少你就可以写多少px。很方便你开发项目哦有图有代码,简单明了npm 同时装下面2个东西,你也可以分开装。npm i lib-flexible postcss-px2rem --save先介绍一下flexible效果和作用flexible会为页面根据屏幕自动添加标签,动态控
简单说一下解决办法: npm i postcss-pxtorem@5.1.1 想知道原理的移步大佬的文章 https://www.cnblogs.com/liangziaha/p/14492288.html。 ...
转载 2021-08-05 12:01:00
862阅读
2评论
1. 写在前面在前面的博客中,对webpack打包项目进行了简单介绍,而且都是关于打包编译 「.js」 文件的介绍。我们知道在一个基于webpack的项目中,肯定不止是 「.js」 文件,还有 「.html」 、「.css」、「.png」 等文件,在后面的博客中会给大家一一讲述,在这篇博客中,我们就介绍如何使用webpack打包编译 「.css」 文件。主要内容包括:如何在项目中引入 「.css」
原创 2021-05-19 13:14:35
1912阅读
  • 1
  • 2
  • 3
  • 4
  • 5