logo
指南
配置
插件
指南
配置
插件
简体中文

Lightningcss 插件

TIP

推荐使用 lightningcss 替代 postcss,提升整体效能

快速开始

安装插件

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

注册插件

emp-config.js
import {defineConfig} from '@empjs/cli'
import lightningcssPlugin, {postcss} from '@empjs/plugin-lightningcss'
export default defineConfig(store => {
  return {
    plugins:[
        lightningcssPlugin({
        transform: {
            // px to rem
          visitor:postcss.pxtorem({rootValue: 16, excludeSelectors: [], minPixelValue: 1}),
          // or px to vw
          visitor:postcss.pxtovw({
            designWidth: 320,
            minPixelValue: 1,
            excludeSelectors: [],
            }),
        },
      })
    ],
  }
})

Postcss 兼容

postcss 涵盖了主流的 Postcss 插件的支持 如:

兼容性设置

  • lightningcss 自动集成了 autoprefixer 通过 build.browserslist 可以自定义 browserslist
  • emp 集成了默认的浏览器设置，可以通过 store.browserslistOptions.default 或者 store.browserslistOptions.h5 设置 mobile web 支持
emp-config.js
import {defineConfig} from '@empjs/cli'
import lightningcssPlugin from '@empjs/plugin-lightningcss'
export default defineConfig(store => {
  return {
    plugins:[
        lightningcssPlugin()
    ],
    build: {
      browserslist: store.browserslistOptions.h5,
    },
  }
})