使用Pug开发自包含微组件：如何避免样式重复？

在你的Node.js+Express+Parcel+Pug3项目里，要实现组件CSS仅在基础模板的styles块中注入一次，避免多次调用组件时样式重复，这里有几个实用的方案：

方案一：利用Pug全局变量+block append做注入标记 #

这个方法的核心是通过一个全局变量标记组件样式是否已经注入，第一次调用组件时将样式追加到styles块，后续调用直接跳过样式注入。

1. 基础模板_base.pug #

doctype html
html
  head
    title= title
    //- 预留styles块用于注入样式
    block styles
  body
    block content

2. 组件模板widget.pug #

mixin widget(options = {})
  //- 检查是否已经注入过当前组件的样式
  if !widgetStylesInjected
    //- 标记样式已注入，避免后续重复添加
    - widgetStylesInjected = true
    //- 将组件样式追加到基础模板的styles块中
    block append styles
      style.
        .widget {
          padding: 1rem;
          border: 1px solid #eee;
          border-radius: 4px;
        }
        .widget__title {
          font-size: 1.2rem;
          margin-bottom: 0.5rem;
        }
        //- 其他组件样式...

  //- 组件HTML结构
  div.widget
    h2.widget__title= options.title || '默认标题'
    p= options.content || '默认内容'

3. 页面中调用组件 #

extends _base.pug

include widget.pug

block content
  //- 第一次调用组件时会注入样式
  +widget({title: "第一个组件", content: "这是第一个组件的内容"})
  //- 后续调用只会渲染HTML，不会重复注入样式
  +widget({title: "第二个组件", content: "这是第二个组件的内容"})

说明：Pug在编译每个页面时，全局变量是独立的（每个请求或模板编译实例的变量不共享），所以不会出现跨页面的样式注入问题，完全满足多页面的需求。

方案二：抽离组件CSS为独立文件，基础模板统一引入 #

如果组件样式比较复杂，或者你希望样式和模板分离，可以把组件CSS抽成单独文件，在基础模板的styles块中统一引入一次。

1. 组件样式文件widget.css #

.widget {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
.widget__title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

2. 基础模板_base.pug引入样式 #

doctype html
html
  head
    title= title
    block styles
      //- 统一引入组件样式，Parcel会自动处理打包
      link(rel="stylesheet" href="/css/widget.css")
  body
    block content

3. 组件模板widget.pug（仅保留HTML结构） #

mixin widget(options = {})
  div.widget
    h2.widget__title= options.title || '默认标题'
    p= options.content || '默认内容'

说明：这种方式更符合前端工程化的分离原则，Parcel会帮你处理CSS的打包、压缩，甚至可以结合postcss做前缀补全等优化。如果只有部分页面用到该组件，也可以在对应页面的styles块中单独引入，而不是在基础模板全局引入。

方案三：结合Parcel的CSS模块化能力（进阶） #

如果你的项目已经在用Parcel处理资源，可以利用它的CSS模块化特性，把组件样式写成模块化CSS，Parcel会自动去重。不过这种方式需要调整组件写法：

1. 组件模块化样式widget.module.css #

.widget {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
.title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

2. 组件模板适配（需JS桥接） #

由于Pug本身不直接支持ES模块导入，需要在Express的渲染上下文里注入样式类名，或借助Parcel的Pug插件处理。这种方式更适合大型项目的组件体系，复杂度稍高。

推荐优先尝试方案一或方案二，根据组件复杂度和项目架构选择：方案一适合样式简单、希望组件自包含的场景；方案二更适合样式复杂、追求分离原则的场景。

内容的提问来源于stack exchange，提问作者MDr