Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

133
Visualizações
Rollup imported css in a webcomponent

I am creating simple webcomponent now I want to import css , I found a method using adpotedstylesheet.

Here is how I import it my webcomponet

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

and here is my rollup settup for bundling my component

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(),
  ],
};

Now when i run npm run buil I get the following error.

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

enter image description here

What am I doing wrong here ???

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Currenly, Rollup doesn't support import assertions. There is open issue for Rollup to address it. There is an experimental Rollup plugin that supports this but it seems to have some issues.

Another option you can try is to use rollup-string-plugin. You can use it to read CSS file as a string and then build your constructible stylesheets and assign it to adoptedStyleSheets property as explained here for Webpack. Following is one example of doing it..

// 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>
    `;

  }
}

Side note: With Webpack, you can use raw-loader.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda