Lightning CSS

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".css" ]

includes string boolean

Custom includes path

Default:

site.options.includes

options object

Options passed to parcel_css

Default:

{
  minify: true,
  drafts: { customMedia: true },
  targets: {
    android: 6553600,
    chrome: 6553600,
    edge: 6553600,
    firefox: 6553600,
    ios_saf: 1048576,
    safari: 1048576,
    opera: 6553600,
    samsung: 1245184
  }
}

Description

lightningcss 插件使用 Lightning CSS 处理器 (之前被称为 Parcel CSS) 打包你的 CSS 文件。

Installation

在你的 _config.ts 文件中导入此插件来使用它:

import lume from "lume/mod.ts";
import lightningCss from "lume/plugins/lightningcss.ts";

const site = lume();

site.use(lightningCss(/* Options - 选项 */));

export default site;

Configuration

此插件接受一个配置对象。可用的选项有:

• extensions: 插件将加载的文件扩展名数组。 默认值是 [".css"]。 而不是替换它们。
• options: 包含 lightning-css 选项的对象。
• includes: 搜索 @import 文件的目录。 默认值是 "_includes"。 设置为 false 以禁用它。

默认配置示例:

import lume from "lume/mod.ts";
import lightningCss, { version } from "lume/plugins/lightningcss.ts";

const site = lume();

site.use(lightningCss({
  extensions: [".css"],
  includes: "_includes",
  options: {
    minify: true,
    drafts: {
      nesting: true,
      customMedia: true,
    },
    targets: {
      android: version(100),
      chrome: version(100),
      edge: version(100),
      firefox: version(100),
      ios_saf: version(16),
      safari: version(16),
      opera: version(100),
      samsung: version(19),
    },
  },
}));

export default site;