Using Next.js, it is not possible to use absolute imports within SASS

Question

Using Next.js, it is not possible to use absolute imports within SASS

Having trouble utilizing @/ imports within my scss files.

The variables I need are stored in src/styles/_variables.scss

Here is my 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"]
}

In my next.config.mjs file:

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

export default nextConfig;

Struggling to troubleshoot this issue. Any insights would be greatly appreciated.

Seems like I've followed all the necessary steps to enable absolute imports in an .scss file, but it's not working as expected.

typescript next.js sass

Answer 1

Answer №1

If you have a Sass file named _custom.scss where your custom styling variables are defined:

// _custom.scss

$primary-color: #ff6347;
$secondary-color: #20b2aa;
$font-family: 'Helvetica Neue', sans-serif;

Now, if you wish to utilize these variables in another Sass file, let's say main.scss:

// main.scss

@use 'custom';

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

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

Make sure both files (_custom.scss and main.scss) reside in the same directory or verify that the path mentioned in the @use directive is accurate.

The @use directive allows us to import the _custom.scss file into our working file.

Answer 2

If you have a Sass file named _custom.scss where your custom styling variables are defined:

// _custom.scss

$primary-color: #ff6347;
$secondary-color: #20b2aa;
$font-family: 'Helvetica Neue', sans-serif;

Now, if you wish to utilize these variables in another Sass file, let's say main.scss:

// main.scss

@use 'custom';

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

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

Make sure both files (_custom.scss and main.scss) reside in the same directory or verify that the path mentioned in the @use directive is accurate.

The @use directive allows us to import the _custom.scss file into our working file.

Answer 3

Answer №2

It's actually quite simple, all you need to do is define the variables you want in your _variables.scss file. For example:

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

Next, import the _variables in the .scss file where you want to use them. Make sure to import with the correct relative path. For instance, if your _variables file is located in src/styles/, you should import it using the complete relative path like this:

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

. Then simply utilize the variables in the file.

Example:

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

.main_example_class {
   background-color: $pink;
}

You can also opt for @use instead of @import. With @use, just call the file without the extension and underscore, then use the word variables before the variable name.

Example:

@use "src/styles/variables";

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

I hope this explanation is helpful. The versions I am currently using are next.js 14.1.2 and sass ^1.72.0.

If you have any other queries, feel free to leave a comment and I'll assist you further.

PS: No additional configurations needed in next.config.mjs file.

Answer 4

It's actually quite simple, all you need to do is define the variables you want in your _variables.scss file. For example:

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

Next, import the _variables in the .scss file where you want to use them. Make sure to import with the correct relative path. For instance, if your _variables file is located in src/styles/, you should import it using the complete relative path like this:

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

. Then simply utilize the variables in the file.

Example:

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

.main_example_class {
   background-color: $pink;
}

You can also opt for @use instead of @import. With @use, just call the file without the extension and underscore, then use the word variables before the variable name.

Example:

@use "src/styles/variables";

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

I hope this explanation is helpful. The versions I am currently using are next.js 14.1.2 and sass ^1.72.0.

If you have any other queries, feel free to leave a comment and I'll assist you further.

PS: No additional configurations needed in next.config.mjs file.

Using Next.js, it is not possible to use absolute imports within SASS

Answer №1

Answer №2

Similar questions

What is the best way to assign a variable with the type (x:number)=>{y:number,z:number}?

Having trouble locating the name WebGLObject in my TypeScript code

The utilization of 'fs' in the getInitialProps function is not permitted

Creating Angular models for complex nested JSON structures

What is the best strategy for managing a sizable react application using react-query?

Is there a method to retrieve Mui state classes easily?

Blend the power of Node's CommonJS with the versatility of Typescript's ES modules

Recover data after a successful mutation using react-use-form, trpc, and prisma

Troubleshooting issue: Unable to locate library during testing with Nx, Jest, and Angular

Ways to rename a sequelize property following a join operation

Automatically signout of NextAuth.js if the Apollo GraphQL token is found to be invalid or has expired

Ensure that NextJS <Link> obeys the standard "Redirects" middleware

Utilizing SASS to retrieve the H, S, L values from a color

What are the steps to implement vercel OG image in a folder of a next.js app?

What is the best way to incorporate an image into the canvas element and then use it as a drawing surface?

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Employ gulp for rebasing CSS URLs

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

What is the process for declaring a set in typescript?