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:

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.

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?

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

• @vuepress/plugin-register-components: Automatically registering components on the client-side.
• @vuepress/plugin-google-analytics: Automatically set up Google Analytics.

When do I need to use clientDynamicModules?

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

• @vuepress/plugin-blog: Using compile-time metadata to generate some dynamic blog-related modules and initialize them on the client-side by using enhanceAppFiles.