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.

Error de SCSS: Las reglas @use deben ser escritas antes de cualquier otra regla.

06 Aug, 2023 Programación

Tengo un proyecto de React con configuración scss. Cuando creo componentes simples con storybook, uso variables globales con @use "../../assets/styles/constants/_colors". Funciona bien…

Pero si importo mis componentes simples en la página, obtengo este error: @use rules must be written before any other rules. Uso @use en el nivel superior de la hoja de estilo.

Estoy intentando cambiar la configuración de webpack, pero no me está ayudando.
Mi configuración de estilo de webpack:

 {
      test: /\.(scss|css)$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: require(path.join(__dirname, 'src/assets/styles/shared-scss-code.js')),
          },
        },
      ],
    },

Archivo shared-scss-code.js:

const path = require('path');
const resources = [
  'bootstrap-variables.scss',
  '../../../node_modules/...',
  '../../../node_modules/...',
];
module.exports = resources.map((file) => path.resolve(__dirname, file));

La opción hoistUseStatements de sass-resources-loader no me ayuda a solucionarlo.

Espero que alguien pueda ayudarme a solucionar el problema…

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error sugiere que las reglas @use deben definirse en la parte superior de la hoja de estilos. Esto significa que cuando importes tus componentes simples en la página, las reglas @use deben estar definidas en la parte superior de la hoja de estilos que incluye los componentes importados.

    Una solución sería mover las reglas @use a la parte superior de la hoja de estilos principal que incluye tanto los componentes simples como los componentes importados. Otra solución sería definir las reglas @use en una hoja de estilos separada e importarla en la parte superior de la hoja de estilos principal.

    En cuanto a la configuración de webpack, la opción hoistUseStatements del cargador sass-resources-loader sirve para mover las declaraciones @use a la parte superior de la hoja de estilos. Sin embargo, parece que no funciona en tu caso. Puedes intentar usar el complemento postcss-easy-import para asegurarte de que las hojas de estilos importadas se añadan en la parte superior de la hoja de estilos principal.

    Aquí tienes un ejemplo de configuración que utiliza postcss-easy-import:

    {
   test: /\.(scss|css)$/,
   use: [
     'style-loader',
     MiniCssExtractPlugin.loader,
     {
       loader: 'css-loader',
       options: {
         importLoaders: 1,
       },
     },
     'postcss-loader',
     {
       loader: 'sass-loader',
       options: {
         implementation: require('sass'),
       },
     },
     {
       loader: 'postcss-easy-import',
       options: {
         extensions: ['.scss', '.css'],
         prefix: '_',
         glob: true,
         path: ['./src'],
       },
     },
     {
       loader: 'sass-resources-loader',
       options: {
         resources: require(path.join(__dirname, 'src/assets/styles/shared-scss-code.js')),
       },
     },
   ],
},

    Esta configuración utiliza postcss-easy-import para añadir las hojas de estilos importadas en la parte superior de la hoja de estilos principal, seguido de sass-resources-loader para incluir los estilos compartidos.

Comments are closed.