0
344
VistasLa compilación de producción de Next.js no aplica variables css
Tengo la siguiente configuración postcss
module.exports = { plugins: [ [ 'postcss-preset-env', { browsers: 'last 2 versions, IE 11, not dead', preserve: false, features: { 'custom-media-queries': true, 'custom-properties': true, 'nesting-rules': true }, importFrom: ['src/styles/variables.css'] } ] ] }Y este archivo con variables css
@custom-media --desktop screen and (min-width: 768px); @custom-media --mobile screen and (max-width: 767px); :root { --montserrat: montserrat, sans-serif; --sfProDisplay: sf pro display, sans-serif; --helvetica: helvetica, sans-serif; --blue: #315efb; --middleBlue: #2c54e2; --darkBlue: #274bc8; --lightBlue: #e0ebff; --green: #21a038; --grey: #62687f; --darkGray: #343b4c; --blueGray: #8d96b2; --cloudGray: #f3f4f7; --cloudGray7: #afb6c9; --darkCarbone: #1f2431; --paleYellow: #fffde5; --red: #ff564e; }Después de compilar mi proyecto a través de la siguiente compilación y la próxima exportación, los colores no se muestran correctamente. Por ejemplo, color: var(--blueGray), en lugar de color: #8d96b2. ¿Alguien tiene idea de lo que está mal?
3 Respuestas
Responde la pregunta0
Creo que debería importar sus variables CSS directamente en su sección de estilos y no en la configuración. pero podría haberte equivocado
0
El CSS global debe incluirse en el archivo /pages/_app .
De la documentación Agregar una hoja de estilo global :
Para agregar una hoja de estilo (global) a su aplicación, importe el archivo CSS dentro de
pages/_app.js.(...) En el desarrollo, expresar las hojas de estilo de esta manera permite que sus estilos se vuelvan a cargar mientras los edita, lo que significa que puede mantener el estado de la aplicación.
En producción, todos los archivos CSS se concatenarán automáticamente en un único archivo
.cssminimizado.
Asegúrese de importar el archivo donde se definen las variables CSS en su _app personalizada.
import '../styles/globals.css' import '../styles/variables.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default MyApp;