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.

Solo en el modo Just-in-Time (JIT) y la configuración POSTCSS no se compila en Gatsby.

16 Jul, 2023 Programación

Quiero usar el modo “just in time” en mi configuración de Tailwind y Gatsby con postcss.

Cuando ejecuto gatsby develop, me da el siguiente error.

¿Necesito un archivo de webpack separado? Soy muy nuevo en esto, así que no tengo ninguna idea.

“`ERROR #98123 WEBPACK

Error al generar el paquete de desarrollo de JavaScript

Error al compilar el módulo (desde ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js):

TypeError: No se puede leer la propiedad 'enabled' de indefinido“`

A continuación se encuentran mis archivos de configuración.

package.json

"@fontsource/poppins": "^4.5.0",
"@tailwindcss/aspect-ratio": "^0.3.0",
"autoprefixer": "^10.4.0",
"gatsby": "^4.2.0",
"gatsby-plugin-image": "^2.2.0",
"gatsby-plugin-postcss": "^5.2.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-scroll-reveal": "0.0.7",
"gatsby-plugin-sharp": "^4.2.0",
"gatsby-source-filesystem": "^4.2.0",
"gatsby-transformer-sharp": "^4.2.0",
"postcss": "^8.3.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-html-parser": "^2.0.2",
"react-rotating-text": "^1.4.1",
"tailwindcss": "^2.2.19"

Postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para habilitar el modo just-in-time en tu configuración de Tailwind y Gatsby con PostCSS, debes crear un archivo separado tailwind.config.js y modificar tu archivo postcss.config.js.

    En primer lugar, instala el paquete @tailwindcss/jit con el siguiente comando:

    npm install @tailwindcss/jit

    Luego, crea un archivo tailwind.config.js en el directorio raíz de tu proyecto con el siguiente contenido:

    module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // o 'media' o 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

    A continuación, modifica tu archivo postcss.config.js para utilizar el paquete @tailwindcss/jit en lugar del paquete tailwindcss:

    module.exports = {
  plugins: [
    require('@tailwindcss/jit'),
    require('autoprefixer'),
  ],
};

    Guarda los archivos y ejecuta el comando gatsby develop. Ya no deberías recibir el mensaje de error y debería funcionar correctamente con el modo just-in-time habilitado.

Comments are closed.