title: NPM Module's CSS not applied using @vue/web-component-wrapper VueJS Webcomponents
body: <p>While developing a Vue web component, using @vue/web-component-wrapper, the styles of npm_modules are not applied. The css actually isn't loaded at all.
  Here is my <strong>main.js</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>    import Vue from 'vue';
      import wrap from '@vue/web-component-wrapper';
      import App from './App.vue';
      import '@/modules/filters';
      import '@fortawesome/fontawesome-free/css/all.css';
      import '@fortawesome/fontawesome-free/js/all';
  
      const wrappedElement = wrap(Vue, App);
  
      window.customElements.define('hello-there', wrappedElement);
  </code></pre>
  <p>Before that, I had the problem, that even my normal css wasn't applied. I resolved this, by help of the answer of this question: <a href="https://stackoverflow.com/questions/53431754/styling-not-applied-to-vue-web-component-during-development">Styling not applied to vue web component during development
  </a></p>
  <p>Even those imported styles in main.js:</p>
  <pre class="lang-js prettyprint-override"><code> import '@fortawesome/fontawesome-free/css/all.css';
  </code></pre>
  <p>won't load at all.</p>
  <p>First thought -&gt; there is something wrong with the webpack css-loader/vue-style-loader</p>
  <p>Here is my <strong>vue.config.js</strong> (using the workaround from the above mentioned question):</p>
  <pre class="lang-js prettyprint-override"><code>function enableShadowCss(config) {
    const configs = [
      config.module.rule('vue').use('vue-loader'),
      config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('css').oneOf('vue').use('vue-style-loader'),
      config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('css').oneOf('normal').use('vue-style-loader'),
      config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
      config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
      config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
      config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
      config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
      config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
      config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('less').oneOf('vue').use('vue-style-loader'),
      config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('less').oneOf('normal').use('vue-style-loader'),
      config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
      config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
      config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
      config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
    ];
    configs.forEach((c) =&gt;
      c.tap((options) =&gt; {
        options.shadowMode = true;
        return options;
      })
    );
  }
  
  module.exports = {
    chainWebpack: (config) =&gt; {
      enableShadowCss(config);
    },
    configureWebpack: {
      output: {
        libraryExport: 'default',
      },
      resolve: {
        symlinks: false, 
      },
      module: {
        rules: [
          {
            test: /\.ya?ml$/,
            use: 'raw-loader',
            sideEffects: true,
          },
        ],
      },
    },
    css: {
      extract: false,
      loaderOptions: {
        sass: {
          additionalData: `@import &quot;@/styles/_variables.scss&quot;;`,
        },
      },
    },
  };
  </code></pre>
  <p>So I tried to add css-loader/vue-style-loader manually to webpack with:</p>
  <pre class="lang-js prettyprint-override"><code>chainWebpack: (config) =&gt; {
      enableShadowCss(config);
      config.module
        .rule('css')
        .test(/\.css$/)
        .use('css-loader')
        .loader('css-loader')
        .end();
    },
  </code></pre>
  <p>maybe those styles load now, but it throws an syntax error whilst building anyways:</p>
  <pre class="lang-sh prettyprint-override"><code>./node_modules/@fortawesome/fontawesome-free/css/all.css
  
  Syntax Error: CssSyntaxError
  
  (1:4) /Users/.../node_modules/@fortawesome/fontawesome-free/css/all.css Unknown word
  
  &gt; 1 | // style-loader: Adds some css to the DOM by adding a &lt;style&gt; tag
      |    ^
    2 | 
    3 | // load the styles
  </code></pre>
  <p>I know I know, seems obvious but those lines don't appear in the file at all. Maybe in an imported file though.</p>
  <p>Without using the wc-wrapper everything works fine!!
  Well anyways... no clue what I should try next. I am a newbie to webpack and Vue!</p>
  <p>If anybody has an idea I would greatly appreciate it!</p>
  <p>Cheers</p>