postcss-custom-properties
postcss-custom-properties copied to clipboard
Webpack no results at output
I'm currently trying to add this plugin with Webpack. I have no errors on build but there is no change on output css.
postcss.config.js
module.exports = {
plugins: {
'postcss-preset-env': {
stage: false,
features: {
customProperties: {
preserve: true,
warnings: false,
},
},
},
},
};
webpack.config.js
test: /(\.css|\.scss|\.sass)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
{
loader: 'postcss-loader',
},
],
variables.css
:root, [data-theme="default"] {
--border-color: #e7eaec;
--border-color-sec: var(--border-color-sec);
--border-color-3: #e7eaec;
--text-color: #676a6c;
--b-default:#ECECF4;
--b-white:#FFFFFF;
--b-white-2:#FFFFFF;
--b-grey-2:#F7F9FA;
--b-grey-3:#F8F9FA;
--b-grey-4:#f1f1f1;
/** and a lot's of others **/
}
@supports (--css: variables) {
[data-theme="dark"]{
--text-color: #e4e4e4;
--b-white:#191818;
--b-white-2:#2f2f2f;
//Base
--b-default:#33333D;
--b-grey-2:#262629;
--b-grey-3:#262629;
--b-grey-7:#33333D;
--b-grey-5: #2b2b2b;
--b-grey-9:#1e1e21;
--b-grey-8:#1e1e21;
--b-grey-11:#2f2f2f;
--b-grey-12:#3a3a3a;
--b-grey-13: #1e1e21;
--b-grey-14:#565656;
--b-black:#D6D9E9;
/** and a lot's of others **/
}
}
There is probably a mistake but what ?
Try to change feature name to kebab-case
variant:
module.exports = {
plugins: {
'postcss-preset-env': {
features: {
'custom-properties': {}
},
},
},
};
@valentinbourqui , did you find a resolution for this issue? I am having similar results.
I have some problem, seems the definition and reference of variable must in the same css file. Or you have to specify var definition file via importFrom