add another option *styleMode* #2
Conversation
When we are running on development, usually we won't extract global styles to a *.css* file, what will make the global style loaded after the server rendered *style* tags, then the style could be overridden by global styles. By default, `styleMode` is `true`, if it is set to `false`, the server rendered *styles* tags will be injected before `tail` instead of after `head`, so that the server rendered styles won't be overridden by global styles.
|
Does this mean you put your global styles at the end of If you place your global CSS in |
|
@yyx990803 It is only for development. We have two global styles, in development we do not extract them, and we inject them on in client and it is not handled by Then the two styles will be loaded after ssr rendered. entry-client.js import 'globalA.styl' // will be extract into `globalA.css` in production
import 'globalB.styl' // will be extract into `globalB.css` in production
// I want extract two `.css` files in production, but it seems that in `.vue` file I could not do that, so I use the normal `style-loader` to handle them.
new Vue(...)entry-server.js // no global style is imported here
new Vue()In production, the two global files have been extracted into |
|
I finally find out it's my bad to only include entry styles on client which should also be included on server. |
When we are running on development, usually we won't extract global styles to a .css file, what will make the global style loaded after the server rendered style tags, then the style could be overridden by global styles.
By default,
styleModeistrue, if it is set tofalse, the server rendered styles tags will be injected beforetailinstead of afterhead, so that the server rendered styles won't be overridden by global styles.