在 Web 组件中汇总导入 css答案

【问题标题】：Rollup imported css in a webcomponent在 Web 组件中汇总导入 css
【发布时间】：2021-12-05 11:04:04
【问题描述】：

我正在创建简单的 webcomponent 现在我想导入 css，我找到了一个使用 adpotedstylesheet 的方法。

这是我如何将它导入我的网络组件

import sheet from './styles/swal.css' assert { type: 'css' };

class Demo extends HTMLElement{

   constructor() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(Demo.content.cloneNode(true));
    document.adoptedStyleSheets = [sheet];
    this.shadowRoot.adoptedStyleSheets = [sheet];
   }
}

window.customElements.define("demo-component", Demo);

这是我用于捆绑组件的汇总设置

import summary from "rollup-plugin-summary";
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import postcss from "rollup-plugin-postcss";
import { eslint } from "rollup-plugin-eslint";
import babel from "rollup-plugin-babel";
import { uglify } from "rollup-plugin-uglify";
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: "index.js",
  output: {
    file: "dist/index.js",
    format: "esm",
  },
  onwarn(warning) {
    if (warning.code !== "THIS_IS_UNDEFINED") {
      console.error(`(!) ${warning.message}`);
    }
  },
  plugins: [
    postcss({
      plugins: [],
      extensions: [".css"],
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    eslint({
      exclude: ["src/styles/**"],
    }),
    babel({
      exclude: "node_modules/**",
    }),
    terser({
      ecma: 2017,
      module: true,
      warnings: true,
      mangle: {
        properties: {
          regex: /^__/,
        },
      },
    }),
    summary(),
    replace({
      "Reflect.decorate": "undefined",
      preventAssignment: true,
      ENV: JSON.stringify(process.env.NODE_ENV || "development"),
    }),
    process.env.NODE_ENV === "production" && uglify(),
  ],
};

现在当我运行npm run buil 时，我收到以下错误。

[!] (plugin commonjs) SyntaxError: Unexpected token (3:38)`

我在这里做错了什么？？？

【问题讨论】：

标签： javascript web-component es6-modules commonjs rollup

【解决方案1】：

目前，Rollup 不支持 import assertions。有 open issue 供 Rollup 解决。有一个实验性的 Rollup plugin 支持这一点，但它似乎有一些问题。

您可以尝试的另一个选项是使用rollup-string-plugin。您可以使用它将 CSS 文件作为字符串读取，然后构建可构造的样式表并将其分配给 adoptedStyleSheets 属性，如 Webpack 中的 here 所述。以下是这样做的一个例子..

// Read SCSS file as a raw CSS text
import styleText from './my-component.css';

const sheet = new CSSStyleSheet();
sheet.replaceSync(styleText);

// Custom Web component
class FancyComponent1 extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    // Attaching the style sheet to the Shadow DOM of this component
    shadowRoot.adoptedStyleSheets = [sheet];

    shadowRoot.innerHTML = `
      <div>
        <p>Hello World</p>
      </div>
    `;

  }
}

附注：使用 Webpack，您可以使用 raw-loader。

【讨论】：