postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
596 stars 77 forks source link

Webpack no results at output #187

Open valentinbourqui opened 5 years ago

valentinbourqui commented 5 years ago

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 ?

3lvcz commented 5 years ago

Try to change feature name to kebab-case variant:

module.exports = {
  plugins: {
    'postcss-preset-env': {
      features: {
        'custom-properties': {}
      },
    },
  },
};
scottys88 commented 5 years ago

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

jiawang1 commented 5 years ago

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