I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives.
Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is running smoothly but unfortunately, my scss files are not being compiled. Here is an example of the issue:
https://i.stack.imgur.com/ySEem.png
You can see that --thm-font is set to $primaryTypography instead of the expected value from the .scss.
What I am expecting to see is --thm-font: 'Barlow', sans-serif. It seems like the sass is not being compiled properly. It's worth noting that I am not aiming for a component-based style; rather, I want to have a separate main.scss file where I will import various styles including components and layouts.
_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"
}
}
I would appreciate guidance on which configuration setting I might be missing in order to compile the .scss files correctly.