Style section styles not working in vscode webview

using typescript and vue to render a webview in vscode extension. Problem is, I cannot get .css rules in the <style> section to apply to HTML in the <template> section of the App.vue file. ( problem also applies to import of bootstrap or a css file. )

To illustrate the problem I have a simple App.vue file with a <style> section. The identical code and webpack config works in a browser web page. But does not work in the vscode webview.

How to troubleshoot this problem? I switched to using React in the webview and the CSS worked as it should.

here is the app.vue:

<!-- App.vue   -->

<template>
	<div id="app">
		<h1>h1 demo</h1>
		<h3>h3 demo</h3>
        <div>
            <span class="bash">visual studio code</span>
        </div>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

@Component({
    components: { }
})

export default class App extends Vue {}
</script>

<style>

h1 {
	text-align: center;
}

.bash {
    font-size:3em;
    color:red;
}
</style>

webpack.config.js

// webpack.config.js

var path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/app.ts',
  mode: "development",
  output: {
    path: path.resolve(__dirname, '../../media/dist/demo'),
    filename: 'app.js'
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },

      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: ['\\.vue$'],
            }
          }
        ]
      },

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },

      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }

    ]    
  },

  plugins: [
    new VueLoaderPlugin()
  ]
}

to fix this I had to revert from the current css-loader ( 4.3.0 ) back to 3.6.0.

here are my dev dependencies:

  "devDependencies": {
    "@types/node": "^10.17.32",
    "@types/vscode": "^1.49.0",
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.3",
    "typescript": "^3.3.1",
    "vscode-test": "^1.2.0",
    "vue-loader": "^15.9.3",
    "vue-property-decorator": "^9.0.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },

and webpack

'use strict'
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: "development",
  entry: ['./src/app.ts'],

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },

      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: ['\\.vue$'],
            }
          }
        ]
      },

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },

      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }

    ]    
  },

  plugins: [
    new VueLoaderPlugin()
  ]
}

here is the code I an running. You can run this in the browser, using live server. I works correctly when using css-loader 3.6.0. The styles do not render using css-loader 4.3.0

./src/app.ts

import Vue from "vue";
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

./src/App.vue

<template>
	<div id="app">
		<h1>demo</h1>
        <div class="alert alert-warning">
            steve
        </div>
        <div>
            <span class="bash">visual studio code</span>
        </div>
        <div class="alert alert-info">
            steve
        </div>

	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

@Component({
    components: { }
})

export default class App extends Vue {}
</script>

<style>

*, *::before, *::after {
	box-sizing: border-box;
}

#app {
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.4;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: blue;
}

h1 {
	text-align: center;
}

.bash {
    font-size:3em;
    color:red;
}
</style>

./src/index.html

<!-- \index.html -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>style using vue style tag demo</title>
</head>

<body>
  <div id="app"></div>
  <script src="./main.js" type="text/javascript"></script>
</body>

</html>

./tsconfig.json

{
	"compilerOptions": {
		"module": "commonjs",
		"target": "ES2020",
		"outDir": "./dist",
		"lib": [
			"es6"
		],
	"experimentalDecorators": true, /* needed because of webpack warning message. */
	"declaration": true,
	"sourceMap": true,
		"rootDir": "./src",
		"strict": true   /* enable all strict type-checking options */
	},
	"exclude": [
		"node_modules",
		".vscode-test"
	]
}

./webpack.config.js

// steve/media/webpack.config.js

'use strict'
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: "development",
  entry: ['./src/app.ts'],

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },

      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: ['\\.vue$'],
            }
          }
        ]
      },

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },

      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }

    ]    
  },

  plugins: [
    new VueLoaderPlugin()
  ]

}

package.json dependencies

  "dependencies": {
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.16.0",
    "jquery": "^1.12.4",
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.5",
    "vue-router": "^3.4.3"
  },
  "devDependencies": {
    "@types/node": "^10.17.32",
    "@types/vscode": "^1.49.0",
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.3",
    "typescript": "^3.3.1",
    "vscode-test": "^1.2.0",
    "vue-loader": "^15.9.3",
    "vue-property-decorator": "^9.0.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },