postcss-custom-properties icon indicating copy to clipboard operation
postcss-custom-properties copied to clipboard

Webpack no results at output

Open valentinbourqui opened this issue 5 years ago • 3 comments

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 **/
  }
}

image

There is probably a mistake but what ?

valentinbourqui avatar Jun 26 '19 08:06 valentinbourqui

Try to change feature name to kebab-case variant:

module.exports = {
  plugins: {
    'postcss-preset-env': {
      features: {
        'custom-properties': {}
      },
    },
  },
};

3lvcz avatar Jul 01 '19 14:07 3lvcz

@valentinbourqui , did you find a resolution for this issue? I am having similar results.

scottys88 avatar Oct 10 '19 01:10 scottys88

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

jiawang1 avatar Oct 14 '19 00:10 jiawang1