NPM模块的CSS不适用于@ vue / web-component-wrapper VueJS Webcomponents

问题描述

在使用@ vue / web-component-wrapper开发Vue Web组件时，不会应用npm_modules的样式。实际上根本没有加载CSS。 这是我的 main.js ：

    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);

在此之前，我遇到了问题，即使我的普通CSS也没有应用。我通过以下问题的答案解决了这个问题：Styling not applied to vue web component during development

甚至main.js中的那些导入样式：

 import '@fortawesome/fontawesome-free/css/all.css';

根本不会加载。

首先想到的是-> Webpack css-loader / vue-style-loader出了问题

这是我的 vue.config.js （使用上述问题的解决方法）：

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) =>
    c.tap((options) => {
      options.shadowMode = true;
      return options;
    })
  );
}

module.exports = {
  chainWebpack: (config) => {
    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 "@/styles/_variables.scss";`,};

所以我尝试通过以下方式手动将css-loader / vue-style-loader添加到Webpack：

chainWebpack: (config) => {
    enableShadowCss(config);
    config.module
      .rule('css')
      .test(/\.css$/)
      .use('css-loader')
      .loader('css-loader')
      .end();
  },

也许这些样式现在已经加载，但是无论如何构建都会抛出语法错误：

./node_modules/@fortawesome/fontawesome-free/css/all.css

Syntax Error: CssSyntaxError

(1:4) /Users/.../node_modules/@fortawesome/fontawesome-free/css/all.css UnkNown word

> 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
    |    ^
  2 | 
  3 | // load the styles

我知道我知道，这似乎很明显，但是这些行根本没有出现在文件中。也许在导入的文件中。

不使用wc-wrapper，一切正常！ 好吧...无论如何我不知道下一步该怎么做。我是webpack和Vue的新手！

如果有人有想法，我将不胜感激！

欢呼

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）