[英]Next.js production build doesn't apply css variables
I have the next postcss config我有下一个 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']
}
]
]
}
And this file with css 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;
}
After i built my project via next build && next export, colors are not displayed correctly.在我通过 next build && next export 构建项目后,colors 无法正确显示。 For example, color: var(--blueGray), instead color: #8d96b2.
例如,颜色:var(--blueGray),而不是颜色:#8d96b2。 Has anybody idea what's wrong?
有人知道出了什么问题吗?
I believe you should import your CSS variables directly in your styles section and not in config.我相信你应该直接在你的 styles 部分而不是在配置中导入你的 CSS 变量。 but I might have got you wrong
但我可能听错了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.