# @brandocms/europacss 中文文档

规范地址：https://npmcn.com/package/%40brandocms/europacss/

版本：1\.0\.0-beta\.16
npm 元数据更新时间：2026-05-07T08:48:50.005Z
中文译文更新时间：2026-11-08T14:10:12.681Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brandocms/europacss
原文对照：https://npmcn.com/package/%40brandocms/europacss/?lang=original
项目主页：https://github.com/brandocms/europacss
源码仓库：https://github.com/brandocms/europacss

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：454 kB，131 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=14\.0\.0
- 运行依赖：9 个
- peer 依赖：postcss ^8\.0\.5
- 首次发布：2021-03-17T11:06:22.778Z
- 最新版本发布：2026-05-07T08:48:49.742Z
- 近 30 天下载量：2926（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：33（近 12 个月 6 个）

## 中文简介

Europa CSS系统

## 安装

```sh
npm install @brandocms/europacss
```

也可以使用：`pnpm add @brandocms/europacss`、`yarn add @brandocms/europacss`、`bun add @brandocms/europacss`

## README

_数到十,你们就.._

![](http://univers.agency/europa.svg)

[![Build Status](https://img.shields.io/travis/brandocms/europacss/master.svg)](https://travis-ci.org/brandocms/europacss) [![npm version](https://badge.fury.io/js/%40brandocms%2Feuropacss.svg)](https://badge.fury.io/js/%40brandocms%2Feuropacss)

* * *

EuropaCSS最初是作为 SASS 组合和功能的集合而开始的 在与设计机构合作时很方便,这些设计机构的设计非常具体,而且不同 断点。 这些设计系统能很好地翻译成配置并允许 抽出很多涉及锅炉板.

## 事后使用情况

示例 `postcss.config.js`数字 :

```js
module.exports = {
  plugins: [
    require('@univers-agency/europacss')({
      // You can specify your config in one of these ways:

      // 1. Default: Automatically looks for ./europa.config.js or ./europa.config.cjs

      // 2. Path to config file:
      // config: './path/to/europa.config.js',

      // 3. Direct configuration object:
      // config: { /* Your europacss config */ },

      // 4. PostCSS Preset Env options:
      presetEnv: {
        // browsers: ['> 1%', 'last 2 versions'],
        // features: { /* specific features */ },
        // preserve: false,
        // disable: false  // Set to true to disable postcss-preset-env entirely
      }
    }),
    require('postcss-reporter')({ clearReportedMessages: true, throwError: false })
  ]
}
```

> 注:你不再需要列入 `autoprefixer` 或者说 `css-mqgroup` 因为这些问题现在由EuropaCSS内部处理.

## 页:1

-   记得留着你的 `@import` 在您的顶端的语句 `.css` 文件
-   添加

```
@europa arrows;
@europa base;
```

到您主样式表

## CONFIG (英语)

`setMaxForVw`

如果您的最大容器有设定的最大尺寸, 您应该启用 `setMaxForVw`. 这将 确保您 vw 大小的最大断点设置为固定大小 .

例如,如果您有:

```
{
  setMaxForVw: true,
  theme: {
    container: {
      maxWidth: {
        mobile: '100%',
        tablet: '100%',
        desktop: '1920px'
      }
    },
    typography: {
      sizes: {
        h1: {
          mobile: '18px',
          tablet: '4vw',
          desktop: '4vw'
        }
      }
    }
  }
}
```

我们将替换桌面密钥 `4vw` 与 `1920/100*4` 这样字体就不会缩放 超过容器的最大宽度.

`dpxViewportSize` 财务报告和审定财务报表 `dpxViewportSizes`

在使用设计像素单位(dpx)时,您可以指定用于转换的参考视图宽度 设计像素到取景口宽度单位。 这在与 Figma 设计合作时特别有用 用于不同设备大小的特定宽度.

您可以设置全局引用宽度 `dpxViewportSize`,或指定不同的引用宽度 用于单个断点和断点集合 `dpxViewportSizes`数字 :

```js
{
  // Global fallback reference width (used if no specific width is defined)
  dpxViewportSize: 1440, // Default is 1440px if not specified

  // Per-breakpoint and per-collection reference viewport widths
  dpxViewportSizes: {
    // Direct breakpoint references
    xs: 375,
    sm: 768,

    // Breakpoint collections
    $desktop: 1440,
    $tablet: 768,
    $mobile: 375
  },

  theme: {
    typography: {
      sizes: {
        heading: {
          mobile: '25dpx', // Uses 375px reference (from $mobile collection)
          tablet: '35dpx', // Uses 768px reference (from $tablet collection)
          desktop: '45dpx' // Uses 1440px reference (from $desktop collection)
        }
      }
    }
  }
}
```

例如,当使用时 `25dpx` 地点 `$mobile` 参考视图宽度为375px,将 转换为 `6.667vw` (单位:千美元)`(25/375)*100`) (中文(简体) ). 数值相同 `$desktop` 收藏将 使用 1440px 引用,导致 `1.736vw` (单位:千美元)`(25/1440)*100`) (中文(简体) ).

当处理 dpx 单位时, Europa 查找此顺序的引用宽度 :

1.  直接对决 `dpxViewportSizes` 用于当前断点(例如, `xs`, (中文(简体) ), `md`页:1
2.  比赛中 `dpxViewportSizes` 对于包含当前断点的集合(例如, `$mobile`, (中文(简体) ), `$desktop`(中文(简体) )
3.  全球 `dpxViewportSize` 价值
4.  1440px 的默认倒计时

这使得在保留设计文件的同时,很容易保持精确的尺寸 不同设备大小的取景器单元的反应行为.

### Token 参考文献 (设计 Token 异名)

您可以在配置中引用其他主题值 `{path.to.value}` 语法. 用于创建语义符号,用于引用原始符号,与 设计符号系统,如"样式词典"和"Figma Tokens".

```js
module.exports = {
  theme: {
    colors: {
      red: '#f00',
      blue: '#00f'
    },

    button: {
      // Full reference — resolves to '#f00'
      primary: '{colors.red}',
      secondary: '{colors.blue}'
    },

    spacing: {
      xs: { xs: '10px', sm: '15px', md: '15px', lg: '15px', xl: '15px' },
      // Object reference — copies the entire breakpoint object
      block: '{spacing.xs}'
    },

    border: {
      // Partial interpolation — resolves to '1px solid #f00'
      default: '1px solid {colors.red}'
    }
  }
}
```

**全文** (单位:千美元)`'{colors.red}'`: 当整个字符串是单个时 `{ref}`,解决 值保留其原始类型(字符串、对象、阵列).

**部分内插** (单位:千美元)`'1px solid {colors.red}'`: 每个 `{ref}` 已替换字符串。 仅 当引用的值是字符串或数字时工作.

**链条参考文献** 被支持——一个指使符可以指另一个指使符本身是一个 参考文献.

循环引用和缺失路径会丢出描述性错误 .

### 类型

#### 大小

`typography` `sizes` `size_name` `breakpoint_name`数字 : `value`

**实例**

常规设置 :

```
  typography: {
    sizes: {
      base: {
        mobile: '16px'
      }
    }
  }
```

若为 `value` 是对象,所有属性都将被添加到选择器中,即:

```
  typography: {
    sizes: {
      base: {
        mobile: {
          'font-size': '16px',
          'line-height': 1.25
        }
      }
    }
  }
```

**分级打字法(新以β.6为单位)**数字 :

您可以使用斜线标记来组织您的打字, 以便更好的设计系统对齐 :

```js
typography: {
  sizes: {
    // Traditional flat structure (still supported)
    xs: { mobile: '12px', tablet: '14px' },

    // Hierarchical structure using literal slash keys
    'header/large': { mobile: '32px', tablet: '40px', desktop: '48px' },
    'header/medium': { mobile: '24px', tablet: '28px', desktop: '32px' },
    'body/regular': { mobile: '14px', tablet: '16px', desktop: '18px' },

    // OR use nested structure for path traversal
    header: {
      small: { mobile: '18px', tablet: '20px', desktop: '24px' }
    },
    body: {
      small: { mobile: '12px', tablet: '14px', desktop: '16px' },
      caption: { mobile: '10px', tablet: '12px', desktop: '14px' }
    }
  },

  families: {
    // Traditional flat structure
    main: ['Helvetica', 'Arial', 'sans-serif'],

    // Hierarchical structure using literal slash keys
    'body/regular': ['Inter', 'Helvetica', 'sans-serif'],
    'header/display': ['Playfair Display', 'Georgia', 'serif'],

    // OR use nested structure for path traversal
    body: {
      strong: ['Inter-Bold', 'Helvetica-Bold', 'sans-serif']
    }
  }
}
```

这允许更多的直观使用, 匹配像 Figma 这样的设计工具 :

```css
@font header/display;        /* Uses literal 'header/display' key or header.display path */
@fontsize body/regular;      /* Uses literal 'body/regular' key or body.regular path */
@fontsize header/large/1.2;  /* With line-height */
@fontsize header/small;      /* Uses nested header.small structure */
@font body/strong;           /* Uses nested body.strong structure */
```

**优先权**:先检查字串键,如果找不到字串键,则尝试路径 traversal.

**减少重复使用 `__base__` (新译为β.9)**数字 :

使用特别 `__base__` 键以定义适用于所有断点的共同属性,减少配置重复:

```js
typography: {
  sizes: {
    'body-large': {
      // Common properties applied to parent rule (outside media queries)
      __base__: {
        'line-height': '135.2%',
        'letter-spacing': '-0.02em'
      },
      // Breakpoint-specific properties (in media queries)
      xs: { 'font-size': '20px' },
      sm: { 'font-size': '25px' },
      md: {
        'font-size': '30px',
        'line-height': '140%'  // Overrides __base__ line-height for md
      }
    }
  }
}
```

用法 :

```css
h2 {
  @fontsize body-large;
}
```

生成的 CSS :

```css
h2 {
  line-height: 135.2%;
  letter-spacing: -0.02em;
}
@media (width <= 739px) {
  h2 { font-size: 20px; }
}
@media (width >= 740px) and (width <= 1023px) {
  h2 { font-size: 25px; }
}
@media (width >= 1024px) {
  h2 {
    font-size: 30px;
    line-height: 140%;  /* Overrides base */
  }
}
```

**函数调用在 `__base__`**数字 :

您可以在 `__base__` 以引用您主题配置的其他部分。 这对参考字体家族特别有用:

```js
typography: {
  families: {
    main: ['Inter', 'system-ui', 'sans-serif'],
    'header/display': ['Playfair Display', 'Georgia', 'serif']
  },
  sizes: {
    'body-text': {
      __base__: {
        // Function receives theme object and automatically joins arrays
        'font-family': theme => theme.typography.families.main,
        'letter-spacing': '0.01em'
      },
      xs: '14px',
      sm: '16px',
      md: '18px'
    },
    heading: {
      __base__: {
        // Works with hierarchical keys too
        'font-family': theme => theme.typography.families['header/display'],
        'text-transform': 'uppercase'
      },
      xs: '24px',
      sm: '28px',
      md: '32px'
    }
  }
}
```

函数可以返回 :

-   **阵列**: 自动加入适当的分隔符 (`,` 页:1 `font-family`空间 `transform`页:1
-   **字符串**: 直接使用
-   支持的数组属性 : `font-family`, (中文(简体) ), `background-image`, (中文(简体) ), `box-shadow`, (中文(简体) ), `text-shadow`, (中文(简体) ), `transition`, (中文(简体) ), `animation`, (中文(简体) ), `filter`, (中文(简体) ), `transform`

这对打字的风格特别有用 `line-height`, (中文(简体) ), `letter-spacing`, (中文(简体) ), `font-family`,或者其他属性在断点之间保持不变,而仅 `font-size` 变化.

## 轨道

待办事宜

### `@responsive {breakpointQuery} {block}` (别名: `@mq`(中文(简体) )

**实例**数字 :

```postcss
@responsive desktop_md {
  display: none;
}

@responsive <=ipad_portrait {
  color: red;
}
```

您还可以使用 `@mq` 作为更短的别名:

```postcss
@mq desktop_md {
  display: none;
}
```

**自定义带箭头语法的区域**数字 :

对于与您定义的断点不符的正交媒体查询,请使用箭头语法:

```postcss
/* Custom min and max */
@mq 359px->740px {
  font-size: 14px;
}

/* Open-ended min (no max) */
@mq 500px-> {
  display: flex;
}

/* Open-ended max (no min) */
@mq ->800px {
  padding: 10px;
}
```

### `@color {fg/bg/stroke/fill/border/border-[top|bottom|left|right]} {colorName/hex}`

尝试得到 `colorName` 从 `theme.colors`,否则会通过颜色. 可以通过点或斜线标记来访问嵌入的颜色(`headings.h2` 或者说 `headings/h2`) (中文(简体) ).

**实例**数字 :

```
h2 {
  @color fg headings.h2;
  @color fg headings/h2;  /* equivalent */
  @color bg transparent;
}
```

### `@grid`

在所有断点设置您沟槽配置的列间隙.

**实例**数字 :

```
.my-grid {
  @grid;
  grid-template-areas: "a b"
                       "a c";
  grid-template-columns: 6fr 6fr;

  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }

  .c {
    grid-area: c;
  }
}
```

这就形成了6个柱子宽的堆放网格.

### `@display [displayType[/flexDirection][/flexWrap]] [breakpointQuery]`

添加响应显示的快捷键 .

**实例**数字 :

```
article {
  @display flex $mobile;
}

article {
  @display flex/row/wrap $mobile;
}
```

### `@order {orderNumber} [breakpointQuery]`

添加响应命令的快捷键 .

**实例**数字 :

```
article {
  @order 1 $mobile;
}
```

### bed bed {

**小册子**数字 :

`{aspectRatio}`

-   第16/9号来文

### `@space {decl} {sizeQuery} [breakpointQuery]`

**小册子**数字 :

`{decl}`

-   `container` (不接受) `sizeQuery`,仅限 `[breakpointQuery]`(中文(简体) )
-   `margin-x`, (中文(简体) ), `margin-y`, (中文(简体) ), `padding-x`, (中文(简体) ), `padding-y`
-   `translateX`, (中文(简体) ), `translateY`, (中文(简体) ), `translateZ`, (中文(简体) ), `scale`
-   任何接受你给出的值的道具.

`{sizeQuery}`

-   `xs` > 从 XS 获取 `theme.spacing` 地图.
-   `-xs` > 从 XS 获取负值 `theme.spacing` 地图.
-   `2` > 获取 `2` 是沟道的两倍.
-   `1/3` > Calcs a分数.
-   `3:1/6` > Calcs 分数为 3/ 6,但增加了 1个地沟单元
-   `xs/2` > 从 XS 中获取一半 `theme.spacing` 地图.
-   `between(20px-50px)` > 从断点开始的20px到断点结束的50px的数值缩放.
-   `container` > 从 `theme.container.padding` 为断点.
-   `-container` > 获取负值 `theme.container.padding` 为断点.
-   `vertical-rhythm(theme.typography.sizes.xl)` > 抓取断点对象并用默认行高相乘.
-   `vertical-rhythm(theme.typography.sizes.xl, 1.2)` > 抓取断点对象并乘以1.2为行高.
-   `calc(100vw - var[container] + var[1])` > 开关 `var[container]` 财务报告和审定财务报表 `var[1]` 有正确数值的 集装箱铺设和每个断口1个地沟单元.
-   `20dpx` > 设计以视图宽度为比例的像素单位 `dpxViewportSize` 设置( 默认为 1440px ).
-   `negate(currentGap, desiredGap)` > 消除当前差距并增加预期差距. 用来克服关于个别儿童的弹性列间隙。 总是输出 `margin-top`。 。 。 . 期望的差距可包括: `negate(block, block+xs)`, (中文(简体) ), `negate(block, block-2vw)`。 。 。 .

**实例**数字 :

```postcss
.block {
  @space margin-y xl/2;

  &:first-of-type {
    @space margin-top xl;
  }

  &:last-of-type {
    @space margin-bottom: xl;
  }
}

.overlap {
  /* Use negative named spacing to create overlaps */
  @space margin-top -block;
}

.flex-column-child {
  /* Override flex column gap: negate the parent gap and add desired gap */
  @space negate(block, 25px);
  /* Or use expressions: negate(block, block+xs) */
}

.powerful-stuff {
  /* move element 4 columns + a gutter size to the left */
  @space translateX calc(var[4:1/12] * -1);
}
```

如果您需要将设定属性标记为 `!important` 您可以使用 `@space!`

```postcss
  @space! margin-left xs;
```

### `@font {fontFamily} [fsQuery]`

选择字体家族。 也可以通过字体大小查询.

**小册子**数字 :

`{fontFamily}`

-   选择 `fontFamily` 从 `typography.families`
-   **等级密钥**: 对有组织的打字(如:, `body/regular` 或者说 `body.regular`, (中文(简体) ), `header/display` 或者说 `header.display`(中文(简体) )
-   两种标记都支持走道(例如, `body/regular` 财务报告和审定财务报表 `body.regular` 两人为 `'body/regular': [...]` 财务报告和审定财务报表 `body: { regular: [...] }`(中文(简体) )

`[fsQuery]`

-   也可以通过。 将创建 `@fontsize` 规则与 `fsQuery` 作为参数

**带有分级打字的示例**数字 :

```css
@font body/regular;        /* Uses 'body/regular' from families config */
@font header/display xl;   /* Uses 'header/display' font with 'xl' size */
```

### `@fontsize {fsQuery} [breakpointQuery]`

**小册子**数字 :

`{fsQuery}`

-   `lg` > 选择 `lg` 密钥从 `theme.typography.sizes` 跨断点
-   `lg/2.0` > 另设 `line-height` 改为 `2.0`
-   `lg(2.0)/2.0` > 添加修改符 `(2.0)` 用于最终字体大小.
-   `between(18px-22px)` >响应字体大小,从18px到22px. 需要一个断点才能正常运行 .
-   `product.size` 或者说 `product/size` > 绕过密钥路径 `product.size` 在内部 `theme.typography.sizes`
-   `20dpx` > 设计以视图宽度为比例的像素单位 `dpxViewportSize` 设置( 默认为 1440px)
-   **等级密钥**:对有组织大小(如:, `header/large` 或者说 `header.large`(中文(简体) )
-   两种标记都支持走道(例如, `header/large` 财务报告和审定财务报表 `header.large` 两人为 `'header/large': {...}` 财务报告和审定财务报表 `header: { large: {...} }`(中文(简体) )

`[breakpointQuery]`

-   `xs` > 只针对 `xs` 断点
-   `>=md` > 仅用于较大或等于 `md`

**带有分级打字的示例**数字 :

```css
@fontsize header/large;        /* Uses 'header/large' size from config */
@fontsize body/small/1.5;      /* Uses 'body/small' size with line-height 1.5 */
@fontsize header/large >=md;   /* Responsive: header/large for md and up */
```

**说明**:解析器在智能上区分了分级键(如:, `header/large`)和行高语法(例如, `24px/1.5`)先检查配置密钥.

### `ease() function`

作为 CSS 立方倍值提供宽松函数。 此函数可用于任何 CSS 属性中接受 `transition-timing-function` 数值.

**小册子**数字 :

`type`

-   标准 : `ease`, (中文(简体) ), `ease.in`, (中文(简体) ), `ease.out`, (中文(简体) ), `ease.inOut`
-   线: `sine.in`, (中文(简体) ), `sine.out`, (中文(简体) ), `sine.inOut`
-   四点: `quad.in`, (中文(简体) ), `quad.out`, (中文(简体) ), `quad.inOut`
-   立方体 : `cubic.in`, (中文(简体) ), `cubic.out`, (中文(简体) ), `cubic.inOut`
-   夸特: `quart.in`, (中文(简体) ), `quart.out`, (中文(简体) ), `quart.inOut`
-   Uin: `quint.in`, (中文(简体) ), `quint.out`, (中文(简体) ), `quint.inOut`
-   展览 : `expo.in`, (中文(简体) ), `expo.out`, (中文(简体) ), `expo.inOut`
-   循环 : `circ.in`, (中文(简体) ), `circ.out`, (中文(简体) ), `circ.inOut`
-   回来: `back.in`, (中文(简体) ), `back.out`, (中文(简体) ), `back.inOut`
-   动力1-4: `power1.in`, (中文(简体) ), `power1.out`, (中文(简体) ), `power1.inOut` 结束 `power4.in`, (中文(简体) ), `power4.out`, (中文(简体) ), `power4.inOut`

**实例**数字 :

```postcss
.element {
  transition: transform 300ms ease('power3.out');
}

.another-element {
  transition: opacity 500ms ease('sine.inOut'), transform 800ms ease('back.out');
}
```

注意: 如果提供无效的宽松名称, CSS 处理过程中会抛出一个错误 .

### `@if {value} {block}`

渲染器 `{block}` 若为 `{value}` 这是真的。 否则就忽略了它.

**小册子**数字 :

`{value}`

-   `theme.typography.optimizeLegibility` > 检查主题配置中的值.

**实例**数字 :

```postcss
@if theme.typography.optimizeLegibility {
  article {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
```

### `@column {sizeQuery} [breakpointQuery]`

在规则内创建弹性列.

**小册子**数字 :

`{sizeQuery}`

-   `1/3` > 占用三分之一的容器,跨越所有断点
-   `3:1/6` > 用三分之一的容器,跨越所有断点,有1个地沟
-   `calc(var[container] + var[6/12])` > 6/12列+容器沟道宽度

`[breakpointQuery]`

-   `xs` > 仅用于 xs 断点
-   `xs/sm/xl` > 对于 xs, sm和 xl 断点
-   `<=md` > 减去并等于 md 断点

**实例**数字 :

```postcss
article {
  @column 1/3;
  @column 3/3 xs;
}
/* Column is 1/3 wide on all devices, except xs, which is 3/3. */
```

### `@iterate {iterable} block`

通过配置对象进行迭接.

**小册子**数字 :

`{iterable}`

-   主题中的路径。object, I.E `theme.header.padding.small`

**实例**数字 :

```postcss
article {
  @iterate theme.header.padding.small {
    @responsive $key {
      padding-top: $value;
      padding-bottom: $value;
    }
  }
}
```

这为每个密钥创建媒体查询 `theme.header.padding.small`

### `@unpack {object}`

解开配置对象.

**小册子**数字 :

`{object}`

-   主题对象中的路径, I.E `theme.typography.sections.navigation`

**实例**数字 :

```postcss
article {
  @unpack theme.typography.sections.navigation;
}
```

结果

```css
  @media (min-size: 0) and (max-size: 749px) {
    article {
      font-size: 1.2rem;
      line-height: 1.6;
    }
  }

  @media (min-size: 750px) and (max-size: 1039px) {
    article {
      font-size: 1.4rem;
      line-height: 1.5;
    }
  }

  /* ... */
```

## 当地发展

为了在不出版的真实项目中测试EuropaCSS的本地开发版本, 使用 pnpm 键 `file:` 协议。 执行 **没有** 使用情况 `pnpm link` 它会形成一个连结 导致插件自行解决 `postcss` 而不是分享项目的, 导致无声处理失败.

在消费项目 `package.json`数字 :

```json
{
  "devDependencies": {
    "@brandocms/europacss": "file:/path/to/europacss"
  }
}
```

然后运行 `pnpm install`。在对插件源进行修改后,重建 (单位:千美元)`yarn build`运行 `pnpm install` 在消费项目中提取变化.

完成后, 切换回注册版本 :

```json
{
  "devDependencies": {
    "@brandocms/europacss": "1.0.0-beta.14"
  }
}
```

## 使用后针头

如果没有以下大插件,这是不可能的 :

-   `postcss-extend-rule`
-   `postcss-functions`
-   `postcss-nested`
-   `postcss-preset-env`
-   `postcss-combine-duplicated-selectors`
-   `postcss-nesting`

## 常见问题

### @brandocms/europacss 是什么？

Europa CSS系统

### 如何安装 @brandocms/europacss？

在项目目录运行 npm install @brandocms/europacss，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：postcss（^8\.0\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brandocms/europacss 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brandocms\_\_europacss 是否存在。

### @brandocms/europacss 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @brandocms/europacss 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=14\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @brandocms/europacss 可以商用吗？

@brandocms/europacss 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @brandocms/europacss 的下载量有多少？

根据 npm 官方下载统计，@brandocms/europacss 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,926 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brandocms/europacss 还在维护吗？

最新版本 1\.0\.0-beta\.16 发布于 2026/05/07（6 个月前）；至今共发布 33 个版本，其中过去 12 个月发布了 6 个；首次发布于 2021/03/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。