Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

I can't override bootstrap and bootstrap vue in a nuxt project#6169

Unanswered
pascencio asked this question inQ&A
Discussion options

Describe the bug

I want override some classes in bootstrap using this settings in my nuxt.config.js file:

bootstrapVue:{css:false,// Or `css: false`bvCSS:false// Or `bvCSS: false`}

To override I'm using a single custom.scss file that import bootstrap and bootstrap-vue scss files.

@import'bootstrap/scss/bootstrap.scss';@import'bootstrap-vue/src/index.scss';// My custom code...

Finally I use my custom.scss as Global CSS:

/*  ** Global CSS  */css:['~assets/custom.scss',],

All config works perfectly generating a app.css file with all css rules. The problem happen when my page load, because after the app.css the application append some style tags with bootstrap and bootstrap vue css rules.

To extract css I use this settings in my nuxt.config.js file:

 build:{/*    ** You can extend webpack config here    */plugins:[newMiniCssExtractPlugin({filename:`css/[name].css`}),newCleanWebpackPlugin(),newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery','window.jQuery':'jquery',Popper:['popper.js','default']}),],extend(config,{ isDev}){if(!isDev){config.module.rules.push({test:/\.scss$/,use:[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'../',},},],});config.module.rules.push({test:/\.scss$/,use:[{loader:"css-loader",},],});config.module.rules.push({test:/\.scss$/,use:[{loader:"sass-loader",},],});}}}

Steps to reproduce the bug

  1. Create a new nuxt.js project as SPA.
  2. Install boostrap-vue and configure as module in nuxt.
  3. Add custom scss including bootstrap and bootstrap vue scss.
  4. Add custom scss as global css
  5. Use MiniCssExtractorPlugin as webpack customization in nuxt config to extract your custom css.
  6. Build your project and deploy as static page.

Expected behavior

Override bootstrap rules with my custom scss file.

Versions

Libraries:

  • BootstrapVue: 2.20.1
  • Bootstrap: 4.1.3
  • Vue: 2.6.12
  • Nuxt.js:

Environment:

  • Device: Desktop
  • OS: Linux 5.9.11-3-MANJARO
  • Browser: Chrome
  • Version: 87

Demo link

Here is my application published in cloudfront:
https://d27mojovwr04ir.cloudfront.net/

Additional context

nuxt-site.zip

You must be logged in to vote

Replies: 1 comment

Comment options

I have the same problems.

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@pascencio@supakornkim
Converted from issue

This discussion was converted from issue #6169 on December 23, 2020 23:20.


[8]ページ先頭

©2009-2025 Movatter.jp