Can' use absolute imports inside SASS using Next.js

Question

Simply cannot use @/ imports inside scss files.

my variables are located at src/styles/_variables.scss

tsconfig.json:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": ".",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles/")],
  },
};

export default nextConfig;

What am I doing wrong? I can't for the life of me figure this out

As far as I've seen, this is pretty much everything you need to do to use absolute imports inside an .scss file.

Answer 1

This is simpler than it seems, you just have to define the variables you want in your _varaibles.scss file, example:

$black: #000;
$white: #fff;
$gray: #f5f5f5;
$pink: #ff69b4;

Then import the _varaibles in the .scss file you want, remember to import with the relative path, for example if your _varaibales file is located in src/styles/ you have to import the complete relative path, it would look like this: @import "src/styles/_varaibles.scss";. Then simply use the variables in the file.

Example:

@import "src/styles/_varaibles.scss";

.main_example_class {
   background-color: $pink;
}

You can also use @use instead of @import. If you decide to use @use, you just have to call the file without the extension and the underscore, then to use the variables you have to use the word varaibles before.

Example:

@use "src/styles/varaibles";

.main_example_class {
    background-color: variables.$pink;
}

I hope this helps you, the version of next,js that I am using is 14.1.2 and that of sass is ^1.72.0.

If you have any other questions, leave me a comment and I'll be happy to help.

PS: No need to make additional configurations in next.config.mjs file.

Answer 2

Assuming you have a Sass file named _variables.scss containing your variables:

// _variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;
$font-family: 'Arial', sans-serif;

And you want to import these variables into another Sass file, for example, styles.scss:

// styles.scss

@use 'variables';

body {
  font-family: variables.$font-family;
  background-color: variables.$primary-color;
}

h1 {
  color: variables.$secondary-color;
}

Ensure that both files (_variables.scss and styles.scss) are in the same directory or that the path specified in the @use directive is correct.

We use the @use directive to import the _variables.scss file.