Nuxt 3 + SASS: Can't use include paths with @import and @use

Issue

I am currently making a web application in Nuxt 3.8.1 and I use the SASS preprocessor for my stylesheets. However, the import directives don't seem to be working correctly. I have a file watcher running on save for each SCSS file.

./assets/styles/main.scss:
I used relative paths here, and they do work (the SCSS compiles) until deployment to production. npm run build fails in the Docker container with the following error: ERROR Unable to resolve @import "../../node_modules/@fontsource/Lato/index.css" from /app/assets/styles. Strangely enough, bootstrap and animate.css are imported correctly and the project is deployed successfully when font imports are removed.

// Fonts.
@import '../../node_modules/@fontsource/Lato/index.css';
@import '../../node_modules/@fontsource/Alexandria/700.css';

$grid-breakpoints: (
  xs: 0,
  sm: 601px,
  md: 996px,
  lg: 1281px,
  xl: 1921px,
  xxl: 2561px
);

// Bootstrap & animations.
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/animate.css/animate';
@import 'transitions';
@import 'list-types';

package.json dependencies:

"dependencies": {
    "@fontsource/alexandria": "^5.0.8",
    "@fontsource/jetbrains-mono": "^5.0.17",
    "@fontsource/lato": "^5.0.17",
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.5",
    "animate.css": "^4.1.1",
    "bootstrap": "^5.3.2"
  }

What I have tried

• I have attempted to refactor the code using the @use directive:

./assets/styles/main.scss:

// Bootstrap & animations.
@use 'transitions';
@use 'fonts';
@use 'list-types';
@use 'node_modules/bootstrap/scss/bootstrap' with (
  $grid-breakpoints: (
    xs: 0,
    sm: 601px,
    md: 996px,
    lg: 1281px,
    xl: 1921px,
    xxl: 2561px
  )
);

...

./assets/styles/fonts.css

/* stylelint-disable */
@use '../../node_modules/@fontsource/lato/scss/mixins' as Lato;
@use '../../node_modules/@fontsource/alexandria/scss/mixins' as Alexandria;

@include Lato.faces(
  $subsets: latin,
  $weights: all,
  $styles: all
);
@include Alexandria.faces(
  $subsets: latin,
  $weights: all,
  $styles: all
);

• I have attempted to include paths in preprocessor options for SCSS using the Nuxt config:

./nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  css: [
    '~/assets/styles/main.scss',
    'animate.css',
    '@fortawesome/fontawesome-svg-core/styles.css',
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ['./assets/styles', './node_modules'],
        },
      },
    },
  },
})

• I have attempted to include paths for the file watcher as an argument (--load-path=node_modules)

No matter what I tried, SASS isn't capable of importing my stylesheets without the use of relative paths, which for some reason fail in a Docker container. So, it seems that I have hit a complete roadblock.

• I have tried the following solution utilizing additionalData property

The sass output:

cmd.exe /D /C call C:\Users\user\AppData\Roaming\npm\sass.cmd --load-path=node_modules main.scss:main.css
Error: Can't find stylesheet to import.
   ╷
5  │ ┌ @use 'node_modules/bootstrap/scss/bootstrap' with (
6  │ │   $grid-breakpoints: (
7  │ │     xs: 0,
8  │ │     sm: 601px,
9  │ │     md: 996px,
10 │ │     lg: 1281px,
11 │ │     xl: 1921px,
12 │ │     xxl: 2561px
13 │ │   )
14 │ │ );
   │ └─^
   ╵
  main.scss 5:1  root stylesheet

I am extremely confused, because I believe relative paths aren't the way to go in general (they just feel wrong to use, and consider they aren't working for me in a container), yet many answers on StackOverflow suggest using them. What makes things worse is that Nuxt 3 does not use sass-loader, which seems to make the configuration less customizable.

Where did I go wrong with this? I am perplexed.

Solution

Okay, I fixed it, it took hours. My project now runs both on development and production builds. Hopefully, this answer is going to clear everything up and save the headache for everyone in the future.

The key problem was my misunderstanding of how Nuxt 3 works with SASS. I solved the issue by squelching my Vue habits of doing all the boilerplate myself.

Key takeaways:

1. Let Nuxt compile SASS for you. There's no need for a watcher - use .scss files directly. That was the most confusing part in this entire saga: the Sass watcher has no idea about aliases and thus creates a compilation error, even though Nuxt is completely okay with you pulling directly from node_modules! I just got rid of the watcher and everything compiled no problem.
2. If there is a Nuxt module that does it for you, opt for that module. I have abolished @fontsource for @nuxtjs/google-fonts. My main concern with Google fonts was the inability to download fonts and full dependency on Google's CDNs as a result of that. However, I was relieved to see that the Nuxt module for Google fonts supports font downloading. Coming from clean Vue, I was blissfully unaware of such a luxury and made it difficult for myself.
3. Don't commit to packages. Always look for a better alternative even if you feel like you might somehow incorporate one you're so used to into your project. If you don't like «moving out» - sometimes you really just have to.

./assets/styles/main.scss:

// Libraries.
@use '@fortawesome/fontawesome-svg-core/styles.css' as fontawesome;
@use 'bootstrap' with (
  $grid-breakpoints: (
    xs: 0,
    sm: 601px,
    md: 996px,
    lg: 1281px,
    xl: 1921px,
    xxl: 2561px
  )
);
@use 'animate.css';

// Modules.
@use 'transitions';
@use 'list-types';

./nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  css: ['~/assets/styles/main.scss'],
  plugins: [],
  modules: [
    ...
    '@nuxtjs/google-fonts',
    ...
  ],
  googleFonts: {
    download: true,
    families: {
      Lato: true,
      Alexandria: true,
    },
  },
  ...
})

package.json dependencies:

"dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.5",
    "animate.css": "^4.1.1",
    "bootstrap": "^5.3.2"
  },

Happy coding! Stay sober and you'll find a solution, my friend.

Answered By - Endermanch