Estoy tratando de agregar una configuración de paquete web personalizado a mi proyecto nextjs. El objetivo es importar automáticamente @import "src/styles/variables.scss"; para cada archivo scss en mi aplicación.
Tengo una configuración de paquete web para el libro de cuentos que funciona como se esperaba, pero no logro que funcione para nextJS.
webpackFinal: async (config, { configType }) => ({ ...config, module: { ...config.module, rules: [ ...config.module.rules, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), }, { test: /\.s[ac]ss$/i, use: { loader: 'sass-loader', options: { additionalData: '@import "src/styles/variables.scss";', }, }, }, ], }, webpack: (config) => ({ ...config, module: { ...config.module, rules: [ ...config.module.rules, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, './'), }, { test: /\.s[ac]ss$/i, use: { loader: 'sass-loader', options: { additionalData: '@import "src/styles/variables.scss";', }, }, }, ], }, })Podemos agregar directamente sassOptions en next.config.js sin sass-loader.
sassOptions: { additionalData: `@import "src/styles/variables.scss"; @import "src/styles/mixins.scss";`, },