Error de SCSS: Las reglas @use deben ser escritas antes de cualquier otra regla.
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…
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 cargadorsass-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 complementopostcss-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
: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 desass-resources-loader
para incluir los estilos compartidos.