如何简单且优雅的使用 PostCSS -> CSS 补前缀功能

最新推荐文章于 2024-03-29 19:45:35 发布
VIP文章 最新推荐文章于 2024-03-29 19:45:35 发布
阅读量752 收藏
点赞数
分类专栏： 前端 PostCSS 文章标签： 前端 PostCSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalenE992/article/details/88665771
版权

这里写自定义目录标题

简单且优雅的使用 PostCSS -> CSS 补前缀功能：

1、安装 package.json

先安装 package.json记录安装所用的插件，以便在其他电脑也能快速搭建对应环境。

npm init

根据对应的提示填写内容后，得到一个 package.json 文件。

注意：

package.json 文件的 name 不能与所需的插件名一样，如果名字相同的话，会引起一下错误（例如我的package文件name改为postcss，然后安装postcss插件的时候会引起下面的错误）。


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  悰零
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
postcss-selector-namespace:使用postcss命名CSS选择器

				
			

			

				

					05-13
				

			

		

		

			
				
postcss-选择器命名空间
安装
$ npm install postcss-selector-namespace
用法
var postcss = require ( 'postcss' )
var selectorNamespace = require ( 'postcss-selector-namespace' )
var output = postcss ( )
  . use ( selectorNamespace ( { selfSelector : ':--component' , namespace : 'my-component' } ) )
  . process ( require ( 'fs' ) . readFileSync ( 'input.css' , 'utf8' ) )
  . css
 input.css
 : --component {
  col

			
		

	



                

              
                



	

		

			

				
					
postcss-windicss:Windi CSS的PostCSS集成

				
			

			

				

					04-01
				

			

		

		

			
				
postcss-windicss
 :test_tube: 过期的。 
 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择。
安装
从NPM安装postcss-windicss 
npm i -D postcss-windicss
 在项目根目录下创建postcss.config.js
 // postcss.config.js
module . exports = {
  plugins : {
    'postcss-windicss' : { /* ... */ } ,
  } ,
}
 将@windicss添加到您的主要CSS条目中：
 /* main.css */
@windicss ;
 使用此配置在项目根目录下创建windi.config.js / windi.con

			
		

	



                


  
              

                


	

		

			

				
					
postcss安装和使用（详细）

					
最新发布

				
			

			

				

					玖疯子
				

				

					03-29
					
					1527
					
				

			

		

		

			
				
在根路径定变零--color变量后，在不使用postcss-cssnext插件时，postcss转化后的css文件中p标签里面的背景色的值还是变量形式，这就需要用到postcss-cssnext插件。reset.css文件是demo.css中导入的文件，通过postcss转化后并没有在同级目录生成新的reset.css文件，代码依旧是@impor”./reset.css”使用postcss转化之后引入的reset.css文件也被转化并合并到新的css文件中。

			
		

	





	

		

			

				
					
vue-cli3.0搭建项目

				
			

			

				

					aaa333qwe的博客
				

				

					07-23
					
					1万+
					
				

			

		

		

			
				
最近的开发项目中使用了vue-cli 3.0，使用体验可以说非常棒了，模板更加制定化，配置更加简洁。以下总结下应用过程中的一些经验。

新建项目

?


			1

			2

			3

			4

			5

			6

			7

			8
			
			
			# 安装

			npm install -g @vue/cli

			# 新建项目

			vue create my-pr...

			
		

	



		

			
		



	

		

			

				
					
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀

				
			

			

				

					在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
				

				

					10-17
					
					2731
					
				

			

		

		

			
				
qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。

			
		

	





	

		

			

				
					
自定义elementui的前缀

				
			

			

				

					weixin_44867717的博客
				

				

					08-28
					
					661
					
				

			

		

		

			
				
1、安装插件：postcss-change-css-prefix2、在根目录下创建postcss.config.js文件，并写入如下内容：plugins: [上面的 gp- 就是自定义的前缀.end().options(.end()

			
		

	





	

		

			

				
					
记录elementui增加样式前缀

				
			

			

				

					weixin_45952434的博客
				

				

					03-26
					
					1034
					
				

			

		

		

			
				
2.在vue.config.js中添加如下代码。3.新建postcss.config.js文件。

			
		

	





	

		

			

				
					
基于qiankun实现微前端架构

				
			

			

				

					qq_24343389的博客
				

				

					07-25
					
					1632
					
				

			

		

		

			
				
基于qiankun实现微前端架构  微前端样式隔离

			
		

	





	

		

			

				
					
使用微前端（qiankun），解决样式污染问题

				
			

			

				

					zhangjing1019的博客
				

				

					01-26
					
					1833
					
				

			

		

		

			
				
使用微前端拆分巨石项目，主应用使用VUE2.0+Element，子应用同样使用VUE2.0+Element。由于主应用和子应用使用了相同的框架，多数元素的class类名相同，子应用与主应用样式隔离不彻底，会导致页面样式错乱。完全使用qiankun自带的沙箱隔离会遇到一些坑。

			
		

	





	

		

			

				
					
webpack4配置之——06：配置样式-css、postcss、scss、less

				
			

			

				

					kevin的博客
				

				

					03-20
					
					3493
					
				

			

		

		

			
				
编译 CSS 文件
处理 css 的相关技术有 postcss、 scss、less，接下来，会一一介绍
.css 文件的编译
编译 .css 文件，需要用到 css-loader 和 style-loader
css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；
style-loader 将所有的计算后的样式加入页面中； 二者组合...

			
		

	





	

		

			

				
					
webpack——postcss插件autoprefixer自动补齐CSS3前缀、px自动转换成rem、静态资源内联raw-loader

				
			

			

				

					strawberry sweet
				

				

					09-01
					
					1238
					
				

			

		

		

			
				
px2rem-loader 只是以构建的手段将 px 单位转换成了 rem。但是 rem 和 px 的单位计算并不清楚，flexible.js 的作用就是动态的去计算不同设备下的 rem 相对 px 的单位，也就是计算跟元素 html 节点的 font-size 大小。因为设备的分辨率不同，前端需要进行页面适配。因为不同浏览器对css属性的支持成都不同，所以需要补齐前缀来获取不同浏览器的支持。看官方文档的时候，发现和学习视频中书写的有区别，特此记录。3、选择的插件不同，写的方法也不一样。

			
		

	





	

		

			

				
					
postcss-prefixwrap：PostCSS插件，用于使用css选择器包装css样式，以限制其对页面中父元素的影响

				
			

			

				

					02-03
				

			

		

		

			
				
:white_heavy_check_mark: 支持PostCSS v7或v8
 一个插件，该插件为CSS样式添加了选择器，以限制它们对页面中父元素的影响。
如何使用这个插件？
 这些说明仅适用于此插件。 请参阅网站以获取框架信息。
安装
使用
yarn add postcss-prefixwrap --dev --exact
 使用 
npm install postcss-prefixwrap --save-dev --save-exact
配置
添加到您的配置。
含糖
const Gulp = require ( "gulp" ) ;
const PostCSS = require ( "gulp-postcss" ) ;
con

			
		

	





	

		

			

				
					
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀

				
			

			

				

					05-12
				

			

		

		

			
				
postcss前缀选择器
 使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。
目录
 安装
$ npm install postcss-prefix-selector
 与PostCSS结合使用
const prefixer = require ( 'postcss-prefix-selector' )
// css to be processed
const css = fs . readFileSync ( "input.css" , "utf8" )
const out = postcss ( ) . use ( prefixer ( {
  prefix : '.some-selector' ,
  exclude : [ '.c' ] ,
  // Optional transform callback for case-by-case overrid

			
		

	





	

		

			

				
					
css性能优化-will-change使用详解

				
			

			

				

					12-14
				

			

		

		

			
				
will-change通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。
属性的取值：
1、auto:  实行标准浏览器优化。
2、scroll-position:  表示开发者希望在不久后改变滚动条的位置或者使之产生动画。
3、contents:  表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。
4、<custom>:  表示开发者希望在不久后改变指定的属性名或者使之产生动画，比如transform 或 opacity。
使用须知：
1、不要将 will-change 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消

			
		

	





	

		

			

				
					
postcss-prefixer:PostCSS插件为所有类和ID加上前缀

				
			

			

				

					05-02
				

			

		

		

			
				
postcss前缀
 一个为CSS选择器添加前缀的插件。
 /* source css file */
# selector { /* content */ }
. selector { /* content */ }
. selector : hover { /* content */ }
. selector__element { /* content */ }
 /* output css file prefixed with "prfx__" */
# prfx__selector { /* content */ }
. prfx__selector { /* content */ }
. prfx__selector : hover { /* content */ }
. prfx__selector__element { /* content */ }
用法
npm i -D 

			
		

	





	

		

			

				
					
postcss-less:用于解析LESS的PostCSS语法

				
			

			

				

					05-13
				

			

		

		

			
				
 以LESS编写的ia主题，该主题使用添加适当的供应商前缀。  const syntax = require ( 'postcss-less' ) ; postcss ( plugins )  . process ( lessText , { syntax : syntax } )  . then ( function ( result ) {  ...

			
		

	





	

		

			

				
					
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位

				
			

			

				

					04-06
				

			

		

		

			
				
postcss-pxtorem  的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...

			
		

	





	

		

			

				
					
乾坤（微前端）父子样式隔离终极解决方案——替换插件前缀

				
			

			

				

					weixin_44008717的博客
				

				

					11-29
					
					7361
					
				

			

		

		

			
				
产生背景

基座应用采用vue2、element-ui
子应用采用vue3、element-plus
因为element-ui和element-plus前缀相同、命名规则相同，但内部html结构发生变化，从而导致子应用element-plus的样式会被污染。

解决方案

笔者之前也有写过使用post-css的解决方案，但还存在未解决的问题，有兴趣的同学可以去看一下，乾坤父子样式隔离解决方案——postcss浅尝
写一个webpack loader替换element-ui class前缀，写一个postcs

			
		

	





	

		

			

				
					
Vue PostCss插件——autoprefixer，自动补全css浏览器前缀

					
热门推荐

				
			

			

				

					足各路
				

				

					06-25
					
					2万+
					
				

			

		

		

			
				
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀  。它是  Google 推荐的，并在Twitter和阿里巴巴中使用。
可以实现css3代码自动补全，也可以运用到sass、less中

前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。
当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
Au.

			
		

	





	

		

			

				
					
vue3使用postcss-px-to-viewport

				
			

			

				

					01-04
				

			

		

		

			
				
在Vue3中使用postcss-viewport插件可以实现前端自适应。下面是使用postcss-px-to-viewport的步骤：  1. 首先，安装postcss-px-to-viewport插件。可以使用以下命令进行安装： ```shell npm i postcss-px-to-viewport ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值