3

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 "~@/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?

kissu
  • 40,416
  • 14
  • 65
  • 133
Bruno Francisco
  • 3,841
  • 4
  • 31
  • 61
  • Can you try the solution here: https://stackoverflow.com/a/68730454/8816585? – kissu Aug 30 '21 at 15:03
  • 1
    Btw `mode: 'universal'` is deprecated: https://stackoverflow.com/a/68272664/8816585 – kissu Aug 30 '21 at 15:04
  • @kissu thanks for the answer. Unfortunately, it is not working. Still getting `$primaryFont` and not the actual value of the variable. – Bruno Francisco Aug 30 '21 at 15:06
  • What if you try `--thm-font: #{$primaryTypography};`? Does it work in the component btw (for debuging purposes)? – kissu Aug 30 '21 at 15:10
  • @kissu doing `--thm-font: #{$primaryTypography};`. Any idea on why this is happening? – Bruno Francisco Aug 30 '21 at 15:12
  • Not sure if you're missing a word here, I'll suppose that it works with it? I found it here: https://stackoverflow.com/a/52603882/8816585 Probably that `:root` does have some kind of specific context. – kissu Aug 30 '21 at 15:13
  • 1
    @kissu adding `body { background-color: $black; }` works. I guess that sass doesn't understand the variable expansion inside `:root` ?! – Bruno Francisco Aug 30 '21 at 15:14
  • 1
    @kissu feel free to answer the question so I can accept your answer. Your idea lead me to the solution :) – Bruno Francisco Aug 30 '21 at 15:14
  • Does this answer your question? [Unable to set SCSS variable to CSS variable?](https://stackoverflow.com/questions/50202991/unable-to-set-scss-variable-to-css-variable) – Martin Aug 31 '21 at 13:30
  • 3
    @null The pseudoclass `:root` has no influence on how SASS/SCSS resolves variables. But for css custom properties like `--foo` any value is a valid value and therefore `$some-color` is a valid string value for `--foo`. Hence explicit string interpolation has to be used with `--foo: #{$some-color};` – Martin Aug 31 '21 at 13:35

1 Answers1

9

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.

kissu
  • 40,416
  • 14
  • 65
  • 133