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.

NextJS – Utiliza sass-loader para agregar variables a cada archivo scss.

29 Jul, 2023 Programación

Estoy tratando de agregar una configuración personalizada de webpack a mi proyecto de Next.js.
El objetivo es importar automáticamente @import "src/styles/variables.scss"; para todos los archivos scss en mi aplicación.

Tengo una configuración de webpack para Storybook que funciona como se espera, pero no logro hacer que funcione para Next.js.

Aquí está mi configuración de Storybook:

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";',
            },
          },
        },
      ],
    },
})

Aquí está mi next.config.js:

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";',
            },
          },
        },
      ],
    },
})
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para importar automáticamente @import "src/styles/variables.scss"; en cada archivo SCSS en un proyecto NextJS, necesitamos agregar una configuración personalizada de webpack al proyecto.

    Primero, necesitamos crear un archivo llamado next.config.js en la raíz del directorio del proyecto si aún no existe.

    Luego, debemos agregar el siguiente código al archivo next.config.js:

    const path = require('path');

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '@import "src/styles/variables.scss";',
          },
        },
      ],
      include: path.resolve(__dirname, './'),
    });

    return config;
  },
};

    Este código extiende la configuración predeterminada de webpack en NextJS agregando una regla personalizada para procesar archivos SCSS. La opción additionalData en la configuración del sass-loader importa automáticamente src/styles/variables.scss en cada archivo SCSS.

    Guarda el archivo y reinicia el servidor de desarrollo para que los cambios surtan efecto. Ahora, cada archivo SCSS en la aplicación debería importar automáticamente src/styles/variables.scss.

Comments are closed.