Vuepress: Custom index.styl styles are being overridden by the

[salomoneb]

• [ x ] I confirm that this is an issue rather than a question.

Bug report

Certain CSS defined in /docs/.vuepress/styles/index.styl is overridden by the default theme styling (defined in theme/styles/index.styl) with the latest version of vuepress.

Similar issues were noted in #472 and #571, with different responses; however, if the purpose of index.styl is to override default styles and the user needs to use !important to do so in some cases, then this should be clarified in the docs.

Version

^1.0.0-alpha.28

Steps to reproduce

1. Create a new vuepress instance with the following structure:

/vuepresstest
|-- docs
    |-- .vuepress       
    |   |--styles
    |       |--index.styl
    |
    |-- articles
        |-- article 1
        |-- article 2

1. In index.styl, modify the default h1 styling to:

h1 {
  background: orange;
  font-size: 16px;
}

1. Run the dev build (yarn docs:dev)
2. Navigate to the article 1 page and inspect the h1 heading. The background should be orange, but the font-size will be overridden by the theme styling:
   

What is expected?

The styles set in index.styl should override the default styling. In this case, the font-size should be 16px.

What is actually happening?

Styles in theme.styl are overriding index.styl.

Other relevant information

• Your OS: Mac OS 10.14
• Node.js version: v10.12.0
• Browser version: Chrome Version 70.0.3538.110
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[ulivz]

Thanks for the report and I can repro that. but it only occurred in dev.

I need some time to do investigation for that.

[Swader]

Can confirm this still happens in dev but the production build has styles applied correctly.

[szeestraten-ntnu]

Also seeing it here.

VuePress version: 1.0.2
Your OS: Mac OS 10.14.5
Node.js version: v12.6.0
Browser version: Chrome Version 75.0.3770.142
Is this a global or local install? local
Which package manager did you use for the install? yarn

[ludanxer]

Same problem when trying to override .site-name in VuePress 1.2.0

But it also not works in production

My Reproduction:

• repo > override-color branch
• reproduction

[Hsueh-Jen]

The only way is adding !important. I think it needs to be fixed.

[bvyy]

Same problem when trying to override .site-name in VuePress 1.2.0

But it also not works in production

My Reproduction:

• repo > override-color branch
• reproduction

you should use .navbar site-name because of its nested css @ludanxer