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.

  • es.davy.ai/
  • Programación /
  • Con Svelte: Cómo colocar los estilos de un componente en un archivo separado pero aún así dentro del alcance de este componente.

Con Svelte: Cómo colocar los estilos de un componente en un archivo separado pero aún así dentro del alcance de este componente.

29 Jul, 2023 Programación

Estoy trabajando en un componente de tabla que será utilizable (incluido en una biblioteca cuando funcione correctamente) en cualquiera de mis proyectos.
Dado que hay muchas reglas de CSS relacionadas con este componente, me gustaría colocar el estilo fuera del archivo Svelte del componente.
Lo que hice fue escribir un archivo CSS separado que importo en el archivo Svelte del componente de la siguiente manera:

import './table.css';

Pero, en este caso, puedo ver mis reglas en el archivo bundle.css generado, pero no están limitadas a mi componente.
Entonces me pregunto si hay alguna forma de hacerlo como me gustaría o no…

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera de delimitar el alcance de tus reglas CSS a tu componente utilizando módulos CSS. Puedes instalar el paquete svelte-preprocess y agregar la siguiente configuración a tu archivo rollup.config.js:

    import preprocess from 'svelte-preprocess';

export default {
  // otras opciones
  plugins: [
    svelte({
      // otras opciones
      preprocess: preprocess({
        // opciones
        postcss: {
          plugins: [
            require('postcss-modules')({
              generateScopedName: '[local]__[hash:base64:5]',
            }),
          ],
        },
      }),
    }),
  ],
};

    Luego, en la hoja de estilos de tu componente, puedes usar la pseudo clase :global para excluir ciertos nombres de clase del alcance local:

    /* table.module.scss */

/* alcance habilitado */
.table {
  /* estilos de la tabla */
}

/* alcance deshabilitado */
:global(.table-striped) {
  /* estilos de tabla a rayas */
}

    Importa la hoja de estilos utilizando import styles from './table.module.scss', luego utiliza los nombres de clase como styles.table y table-striped, respectivamente. De esta manera, los estilos estarán delimitados al componente y cualquier nombre de clase que no sea global se renombrará a nombres de clase únicos basados en la opción generateScopedName de postcss-modules.

Comments are closed.