@RyosukeCla For me not work.

My Css looks like this:

in nuxt.config.js:

  /*
  ** Global CSS
  */
  css: ['~/assets/style/src/main.scss'],

This main.scss looks like this:

// BULMA utilities
@import '../../../node_modules/bulma/sass/utilities/all';

// Theming
@import './css-vars';
@import './theme-vars';

// Bases
@import '../../../node_modules/bulma/bulma';
@import '../../../node_modules/buefy/src/scss/buefy';

The css-vars.scss file contains some css variables with values that will serve the sass variables of the theme-vars.scss file, with the intention that all classes that use these variables receive the variable css and not the value of it. Example:
Desired final output:

.is-primary {
  background-color: var(--primary);
}
// or with fallback
.is-primary {
  background-color: var(--primary, #7957d5);
}

Current output (unwanted):

.is-primary {
  background-color:  #7957d5;
}

My nuxt.conf.js like this:

const pkg = require('./package')
const purgecss = require('@fullhuman/postcss-purgecss')
const postcssCustomProps = require('postcss-custom-properties')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#FFFFFF' },

  /*
  ** Global CSS
  */
  css: ['~/assets/style/src/main.scss'],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/buefy'],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extractCSS: true,

    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

    postcss: {
      plugins: [
        purgecss({
          content: [
            './pages/**/*.vue',
            './layouts/**/*.vue',
            './components/**/*.vue'
          ],
          whitelist: ['html', 'body'],
          whitelistPatterns: [/nuxt-/]
        }),
        postcssCustomProps({
          warnings: false,
          preserve: true
        })
      ]
    }
  }
}

The postcss-custom-properties': false setting, or postcss-custom-properties': { preserve: true } should make the css variables in css-vars.scss be kept in the final css file - this is mine intention. - but this does not happen.

Would anyone know how to give me a way to solve this and keep the css variables in the final css file?