Roots Discourse

How to set up Sage with postcss custom properties?

How do you set up Sage to use both SCSS and PostCSS’ custom properites?

I’ve already added the postcss custom properties using yarn. Now what? I’m not using any frameworks BTW.

My post.config.js file (which is not working):

/* eslint-disable */

const postcssCustomProperties = require('postcss-custom-properties');

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: true,
      postcssCustomProperties: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      
    },
  };
};

Doy!

Inside postcss.config.js add preserve: false to compile css variables.

'postcss-custom-properties': { preserve: false, },