---
sidebar: auto
---

# FAQ

## Why can’t `palette.styl` and `index.styl` merge into one API?

The `palette.styl` is responsible for global color settings. During compilation, theme color constants should be resolved by the preprocessor first and then be applied to the global context.

But for `index.styl`, its job is to override the default styles of application. According to the priority principle of CSS, the later style has a higher priority, so it should be generated at the end of the CSS file.

A simple diagram describing the Stylus compiler’s compilation order as follows:

@flowstart
stage1=>operation: palette.styl
stage2=>operation: default app styles
stage3=>operation: index.styl

stage1->stage2->stage3
@flowend

<br>

## What’s the differences between the `clientDynamicModules` and `enhanceAppFiles`?

Let’s take a look back first, both `clientDynamicModules` and `enhanceAppFiles` can generate modules with dynamic JavaScript code during compile time.

The difference is that the files generated by `enhanceAppFiles` will be loaded and applied automatically when the application is initialized on the client-side, while the files generated by `clientDynamicModules` need to be imported as `@dynamic/xxx` by the users themselves.

```js
module.exports = (options, ctx) => ({
  // Import by entry file automatically.
  enhanceAppFiles: {
    name: 'constans-a',
    content: `...`
  },

  // Need to use via: import '@dynamic/constans-b'
  clientDynamicModules() {
    return {
      name: 'constans-b',
      content: `...`
    }
  }
})
```

## When do I need to use `enhanceAppFiles`?

1. I want to execute some code on the client-side automatically.
2. I don’t need to reuse this module.

**Example:**

- [@vuepress/plugin-register-components](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-register-components/index.js#L24): Automatically registering components on the client-side.
- [@vuepress/plugin-google-analytics](https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/plugin-google-analytics/enhanceAppFile.js): Automatically set up Google Analytics.

## When do I need to use `clientDynamicModules`?

1. I want to generate a dynamic module that needs to be invoked at a specific time.
2. I want to use this module in different modules.

**Example:**

- [@vuepress/plugin-blog](https://github.com/vuepressjs/vuepress-plugin-blog/blob/master/src/node/index.ts#L208): Using compile-time metadata to generate some dynamic blog-related modules and initialize them on the client-side by using `enhanceAppFiles`.

