0
435
ViewsNext.js production build doesn't apply css variables
I have the next postcss config
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']
}
]
]
}
And this file with css variables
@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;
}
After i built my project via next build && next export, colors are not displayed correctly. For example, color: var(--blueGray), instead color: #8d96b2. Has anybody idea what's wrong?
3 answers
Answer question0
I believe you should import your CSS variables directly in your styles section and not in config. but I might have got you wrong
0
Global CSS needs to be included in the /pages/_app file.
From the Adding a Global Stylesheet documentation:
To add a (global) stylesheet to your application, import the CSS file within
pages/_app.js.(...) In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—-meaning you can keep application state.
In production, all CSS files will be automatically concatenated into a single minified
.cssfile.
Make sure you import the file where the CSS variables are defined in your custom _app.
import '../styles/globals.css'
import '../styles/variables.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
0
This may not be worth the bounty but from NextJS docs.
CSS variables are not compiled because it is not possible to safely do so. If you must use variables, consider using something like Sass variables which are compiled away by Sass.
