es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Rollup: inyecta “import index.css” en el archivo index.ts

16 Jul, 2023 Programación

Tengo un proyecto del cual quiero crear un paquete de NPM.
Mi pila de tecnología es: React, Typescript, less y AntD.
Cuando estoy creando un paquete con rollup.js, todo funciona bien, pero, el CSS importado no se inyecta en la parte superior del archivo index.ts que estoy exportando. La única forma en la que pude tener el código CSS en otro proyecto es importándolo explícitamente desde el archivo CSS (import “mypackage/dist/index.css”).
Estoy buscando una forma de configurar rollup para inyectar la línea import "./index.css" al principio del archivo principal index.ts. He probado muchos complementos de css/less, sin éxito.
Aquí está mi archivo rollup.config.js actual:

import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";

import pkg from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: pkg.main,
      format: "esm",
      exports: 'named',
      sourcemap: true,
      strict: false,
    },
  ],
  plugins: [
    postcss({
      extensions: ['.less', '.css'],
      minimize: true,
      modules: true,
      use: {
        sass: null,
        stylus: null,
        less: { javascriptEnabled: true },
      },
      extract: true,
    }),
    typescript({
      objectHashIgnoreUnknownHack: true,
      sourceMap: true,
      inlineSources: true,
    }),
  ],
  external: ["react", "react-dom"],
};
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para inyectar la importación CSS al inicio del archivo index.ts principal al crear un paquete NPM con React, Typescript, less y AntD utilizando rollup.js, puedes agregar el complemento rollup-plugin-string a tu archivo rollup.config.js:

    import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import string from 'rollup-plugin-string';

import pkg from './package.json';

export default {
  input: 'src/index.tsx',
  output: {
    file: pkg.main,
    format: 'esm',
    exports: 'named',
    sourcemap: true,
    strict: false,
  },
  plugins: [
    postcss({
      extensions: ['.less', '.css'],
      minimize: true,
      modules: true,
      use: {
        sass: null,
        stylus: null,
        less: { javascriptEnabled: true },
      },
      extract: true,
    }),
    typescript({
      objectHashIgnoreUnknownHack: true,
      sourceMap: true,
      inlineSources: true,
    }),
    string({
      include: '**/*.css',
    }),
  ],
  external: ['react', 'react-dom'],
};

    Con este cambio, el complemento rollup-plugin-string incluirá todos los archivos CSS del proyecto como cadenas en el paquete final. Luego, en tu archivo index.ts, puedes importar la cadena CSS e inyectarla en la cabecera del documento utilizando una función como esta:

    if (typeof window !== 'undefined') {
  const styleEl = document.createElement('style');
  styleEl.textContent = css; // importa aquí la cadena CSS
  document.head.appendChild(styleEl);
}

    Al hacer esto, el código CSS se inyectará en la cabecera del documento cuando se cargue el paquete, sin necesidad de importar explícitamente el archivo CSS.

Comments are closed.