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

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

Estoy tratando de cambiar la configuración del paquete web, pero no me ayuda. Mi configuración de estilo 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 me pueda ayudar a solucionar el problema...