Lightning CSS 集成

Lightning CSS 是新一代 CSS 处理工具，速度极快且支持现代 CSS 特性。

安装 Lightning CSS

Bash

npm add -D lightningcss

配置使用

JavaScript

export default defineConfig({
  css: {
    transformer: 'lightningcss'
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

Lightning CSS 配置选项

JavaScript

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      // 目标浏览器
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15
      },
      // 支持草案特性
      drafts: {
        nesting: true,
        customMedia: true
      }
    }
  }
})

注意：Lightning CSS 处理速度比 PostCSS 快很多。

支持的现代特性

特性	说明
CSS Nesting	原生嵌套语法
Custom Media Queries	自定义媒体查询
Color Functions	CSS 颜色函数
Logical Properties	逻辑属性

CSS Nesting 示例

CSS

/* Lightning CSS 支持原生嵌套 */
.card {
  padding: 10px;

  .title {
    font-size: 16px;
  }

  &:hover {
    background: gray;
  }
}

与 PostCSS 对比

对比项	PostCSS	Lightning CSS
处理速度	较慢	极快
插件生态	丰富	较少
现代特性	需插件	原生支持

降级现代 CSS

JavaScript

export default defineConfig({
  css: {
    lightningcss: {
      targets: {
        // 降级为兼容语法
        chrome: 80
      }
    }
  }
})

要点总结

css.transformer 指定 Lightning CSS
处理速度比 PostCSS 快
原生支持 CSS Nesting
targets 配置降级目标

📝 发现内容有误？点击此处直接编辑