Project created using VUE, a question about style

Problem Description:

I’m in a vue project, and each component needs to decide whether to import a CSS file based on some parameter of the page. Then I decide to import a CSS file in the script tag of each component, but it is always overwritten by the style tag.

The reason:

– First let’s look at the style hierarchy in VUE:

1. is the style introduced in the index. HTML file in the public folder;

2. Is the style introduced by the main.js file;

3. Is the style introduced in app.vue;

4. Is the style introduced in each component;

– reason:

Because the script tag inside the component is above the style tag, the script file is executed before the style tag. So it is useless to judge the parameters in the script of the component and introduce CSS. The following style overrides its style;

The picture shows the above reason description:

Solutions:

Add inside the incoming file! Important, although the style in the file after the style, but the style level is higher;

If there is any good method welcome to provide