FAQ

为什么不能把 palette.stylindex.styl 合并到一个 API?

palete.styl 负责全局颜色设置。在编译期间,主题颜色常量应该首先由预处理器解析,然后应用于全局上下文。

但对于 index.styl,它的工作是重写应用的默认样式。根据 CSS 的优先级原则,后一种样式具有更高的优先级,因此应该在 CSS 文件的末尾生成。

描述 stylus 编译器编译顺序的简单图表如下:

@flowstart
阶段1=>操作: palette.styl
阶段2=>操作: 默认 app 样式
阶段3=>操作: index.styl

阶段1->阶段2->阶段3
@flowend


clientDynamicModulesenhanceAppFiles 的区别是什么?

让我们先来回顾一下,clientDynamicModulesenhanceAppFiles 都可以在编译期间通过动态 JavaScript 代码生成模块。

不同之处在于,当应用在客户端初始化时,enhanceAppFiles 生成的文件会自动加载和使用;而 clientDynamicModules 生成的文件则需要用户自己引入 @dynamic/xxx

module.exports = (options, ctx) => ({
  // 被入口文件自动引入
  enhanceAppFiles: {
    name: 'constans-a',
    content: `...`
  },

  // 需要引入 '@dynamic/constans-b' 后使用
  clientDynamicModules() {
    return {
      name: 'constans-b',
      content: `...`
    }
  }
})

什么时候需要使用 enhanceAppFiles?

  1. 当你需要在客户端自动执行一些代码时;
  2. 当你不需要复用这个模块时。

比如:

什么时候需要使用 clientDynamicModules?

  1. 当你需要生成一个在特定时间被调用的动态模块时;
  2. 当你需要复用这个模块。

比如:

  • @vuepress/plugin-blog:使用编译期元数据生成一些博客相关的动态模块并通过 enhanceAppFiles 将他们在客户端初始化