Postcss 插件

快速开始

安装插件

npm
yarn
pnpm
bun
npm add @empjs/plugin-postcss

注册插件

emp-config.js
import {defineConfig} from '@empjs/cli'
import pluginPostcss, {postcss as postcssPlugins} from '@empjs/plugin-postcss'
export default defineConfig(store => {
  return {
    plugins:[
      pluginPostcss({
        postcssOptions: {
          plugins: [
            postcssPlugins.autoprefixer(), 
           /**
            * px to vw
            * 默认值
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
           * 可通过传入参数进行替换
           */
            postcssPlugins.pxtovw({}), 
           /**
            * px to rem
            * 默认值
            unitToConvert: 'px',
            viewportWidth: 320,
            viewportHeight: 568,
            unitPrecision: 5,
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            propList: ['*'],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            landscape: false,
            landscapeUnit: 'vw',
            landscapeWidth: 568,
           * 可通过传入参数进行替换
           */
            postcssPlugins.pxtorem({}), 
            ],
        },
      }),
    ],
  }
})

Postcss 内置方法

  • postcss.autoprefixer 兼容性设置 集成于 autoprefixer

  • postcss.pxtorem px转rem 集成于 postcss-pxtorem

  • postcss.pxtovw px转vw 集成于 @empjs/postcss-px-to-viewport