My SASS variables into :root are not interpolated

Question

I'm fairly new to the Nuxt ecosystem. Awesome package that makes our lives much easier.

I'm trying to add sass to my project. After following the documentation my build runs perfectly but my scss files are not being compiled. An example of the problem:

Notice that --thm-font is set to $primaryTypography and not the actual value from the .scss.

I'm expecting to see --thm-font: 'Barlow', sans-serif. I'm assuming that the sass is not being compiled. It is important to note I'm not looking for a component base style but I'm trying to have a main.scss where I will import the component, layouts and many other styles.

_variables.scss

// Base colors
$base: #ee464b;
$baseRgb: (238, 70, 75);
$black: #272839;
$blackRgb: (39, 40, 57);
$grey: #f4f4f8;

// Typography
$primaryTypography: 'Barlow', sans-serif;

@debug $primaryTypography; // -> this one outputs the correct value

:root {
  --thm-font: $primaryTypography;
  --thm-base: $base;
  --thm-base-rgb: $baseRgb;
  --thm-black: $black;
  --thm-black-rgb: $blackRgb;
  --thm-gray: $grey;
}

nuxt.config.js

export default {
  mode: 'universal',
  loading: { color: '#fff' },
  css: [
    '~assets/scss/main.scss'
  ],
  plugins: [
  ],
  buildModules: [
  ],
  modules: [
  ],
  optimizedImages: {
    optimizeImages: true
  },
  build: {
    extend (config, ctx) {
    },
    loaders: {
      sass: {
        prependData: '@import "~@/assets/scss/main.scss";'
      }
    }
  },
  server: {
    port: process.env.APP_PORT
  }
}

package.json

{
  "name": "zimed",
  "version": "1.1.0",
  "description": "Zimed - Vue Nuxt App Landing Page Template",
  "author": "Layerdrops",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@bazzite/nuxt-optimized-images": "^0.3.0",
    "nuxt": "^2.0.0",
    "sass-loader": "10"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.38.2"
  }
}

Which configuration am I missing so that .scss files get compiled?

Answer 1

You need to interpolate the variable like this --thm-font: #{$primaryTypography}; in the scope of :root.
Not sure the why of this behavior, but this answer was my way of finding this out.