PostCss学习笔记，持续记录

房东的狗丶

发布于 2023-02-17 14:51:22

5840

发布于 2023-02-17 14:51:22

文章被收录于专栏：友人a的笔记丶

Css模块

CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。

1.运行时

运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。

但是这种方案毕竟不是强制的，还是有样式冲突的隐患。

2.编译时

编译时的方案有两种，一种是 scoped，一种是 css modules（还有Css in Js）。

scoped 是 vue-loader 支持的方案，它是通过编译的方式在元素上添加了 data-xxx 的属性，然后给 css 选择器加上[data-xxx] 的属性选择器的方式实现 css 的样式隔离。
css-modules 是 css-loader 支持的方案，在 vue、react 中都可以用，它是通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离。
scoped 的方案是添加的 data-xxx 属性选择器，因为 data-xx 是编译时自动生成和添加的，开发者感受不到。
css-modules 的方案是修改 class、id 等选择器的名字，那组件里就要通过 styles.xx 的方式引用这些编译后的名字，开发者是能感受到的。但是也有好处，配合编辑器可以做到智能提示。

PostCss

参考资料

https://blog.csdn.net/JunChow520/article/details/117020367

1.PostCss简介

PostCSS是一款使用JavaScript插件对CSS实现转换的工具
PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext、css modules等。
PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。
PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。

Github：https://github.com/postcss/postcss#usage

2.vite中使用

Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.

API列表：https://postcss.org/api/

import postcssPxtorem from "postcss-pxtorem";
import autoprefixer from 'autoprefixer'

export default {
    //样式表插件
    css: {
        postcss: {
            plugins: [
                autoprefixer({
                    overrideBrowserslist: [
                        "Android 4.1",
                        "iOS 7.1",
                        "Chrome > 31",
                        "ff > 31",
                        "ie >= 8",
                        "last 10 versions", // 所有主流浏览器最近10版本用
                    ],
                    grid: true,
                }),
                postcssPxtorem({
                    rootValue: 37.5,
                    propList: ['*'],
                    unitPrecision: 5
                })
            ]
        }
    }
}

3.相关插件

3.1 autoprefixer

autoprefixer用于自动添加css产商前缀；

$ npm install autoprefixer --save-dev

项目地址

https://github.com/postcss/autoprefixer

3.2 postcsspxtoviewport

$ npm install postcss-px-to-viewport --save-dev

postcsspxtoviewport可以将CSS中的px单位转化为vw，1vw等于1/100视口宽度。

{
  unitToConvert: 'px',//需要转换的单位，默认为"px"
  viewportWidth: 320,//设计稿的视口宽度
  unitPrecision: 5,//单位转换后保留的精度
  propList: ['*'],//能转化为vw的属性列表,支持*和!字符
  viewportUnit: 'vw',//希望使用的视口单位
  fontViewportUnit: 'vw',//字体使用的视口单位
  selectorBlackList: [],//需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。可以使正则表达式，普通字符默认是包含匹配
  minPixelValue: 1,//设置最小的转换数值，如果为1的话，只有大于1的值会被转换
  mediaQuery: false,//媒体查询里的单位是否需要转换单位
  replace: true,//是否直接更换属性值，而不添加备用属性
  /*exclude和include是可以一起设置的，将取两者规则的交集。*/ 
  exclude: undefined,//正则字符或者数组，忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 
  include: undefined,/正则或者数组，只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文 
  landscape: false,//是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) 
  landscapeUnit: 'vw',//横屏时使用的单位 
  landscapeWidth: 568 //横屏时使用的单位 
}

3.3 pxtorem

npm install postcss-pxtorem --save-dev

postcss-pxtorem 可以将CSS中的px单位转化为rem。

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//能转化为vw的属性列表,支持*和!字符
    selectorBlackList: [],//需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。可以使正则表达式，普通字符默认是包含匹配
    replace: true, 
    mediaQuery: false, //允许在媒体查询中转换 px。
    minPixelValue: 0,
    exclude: /node_modules/i
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-19，如有侵权请联系 cloudcommunity@tencent.com 删除

打包