My SASS variables into :root are not interpolated

Issue

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:

enter image description here

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 "[email protected]/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?

Solution

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.

Answered By – kissu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published