How not to generate a fallback for CSS variables in SASS?

Question

css

SCSS duplicates class properties where CSS variables are used. I didn't find anything about disabling it.

Source class:

.class {
  color: var(--text);
}

Compiles to:

.class {
  color: #ebebeb;
  color: var(--text);
 }

Project on NuxtJS (Vue). SCSS is built by Webpack with the sass-loader module , and sass . There is an assumption that one of the modules sets static properties for compatibility with old browsers, but I don’t know which one, I looked through the documentation of all modules but did not find any similar setting.

Answer 1

I dug into the Nuxt dependencies and found postcss-preset-env there which was responsible for this. Disable, add to nuxt.config.js

build: {
    postcss: {
      plugins: {
        'postcss-preset-env': false,
      },
    },
  }

About PostCSS in Nuxt.