New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt css: false should overwrite bootstrap-vue.css #1351

Closed
gabel opened this Issue Nov 15, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@gabel
Contributor

gabel commented Nov 15, 2017

When using bootstrap-vue as nuxt package bootstrap.css can be disabled but this does not apply on bootstrap-vue.css.

if (moduleOptions.css !== false) {
this.options.css.unshift('bootstrap/dist/css/bootstrap.css')
}

this.options.css.push('bootstrap-vue/dist/bootstrap-vue.css')

// example nuxt.config.js
modules: [
    '@nuxtjs/font-awesome',
    ['bootstrap-vue/nuxt', { css: false }]
  ],
  css: [
    '@/assets/scss/custom.scss'
  ]

I would propose to disable bootstrap-vue.css with css: false or to add an additional option to keep it backward compatible.


Example use case:

When I try to overwrite e.g. table sorting icons with the icon library of choice the bootstrap-vue.css gets applied after the scss files defined in nuxt.config.js.

image

Workaround: !important 😢

@pi0 pi0 self-assigned this Nov 15, 2017

@pi0

This comment has been minimized.

Member

pi0 commented Nov 15, 2017

@gabel Thanks for your report. What's your idea if we change push to unshift so user provided stylesheets will get more priority and thus there is no need to important rules. We may also introduce a new module option like bvCSS which can be set to false for disabling this custom css too.

@gabel

This comment has been minimized.

Contributor

gabel commented Nov 15, 2017

@pi0 If bootstrap-vue does not requiry bootstrap to load in advance sure an unshift would help

@gabel

This comment has been minimized.

Contributor

gabel commented Nov 15, 2017

There might be a problem with the approach of unshift

With option css: true all is fine

  • option.css
  • unshift bootstrap-vue (would require to move the line up in index.js)
  • unshift bootstrap

will result in the correct order:

  1. bootstrap
  2. bootstrap-vue
  3. custom.css/scss defined in nuxt.config.js

With option css: false

  • option.css (including self build bootstrap)
  • unshift bootstrap-vue

the resulting order will be

  1. bootstrap-vue
  2. bootstrap
  3. custom.css/scss

And that may be a problem depending on the defined css within bootstrap-vue components.

@pi0

This comment has been minimized.

Member

pi0 commented Nov 15, 2017

Yep. I agree with this mentioned problem. So we have no choice than adding a new option to disable bootstrap-vue.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment