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

[pascencio]

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: [
      new MiniCssExtractPlugin({
        filename: `css/[name].css`
      }),
      new CleanWebpackPlugin(),
      new webpack.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

[supakornkim]

I have the same problems.