Include paths with sass modules

[wityan]

Hei
I work with sass and there with the css modules part. In my next.config.js I have this to import my variables and mixins global.

const path = require('path');
const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, "app/styles/_variables.scss"), path.join(__dirname, "app/styles/_mixins.scss")],
  },
  useTsPathsAsAlias: true,
  publicRuntimeConfig: {
    // Will be available on both server and client
    API_URL: process.env.API_URL,
    APP_URL: process.env.APP_URL,
    WEB_URL: process.env.WEB_URL,
    CMS_URL: process.env.CMS_URL,
    GA_TRACKING_ID: process.env.GA_TRACKING_ID,
  },
};

Is there any issue in my config? Because the mixins and variables do not work. I get this error

error - ./app/styles/_global.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./app/styles/_global.scss)
SassError: no mixin named gradient-primary
        on line 11 of /Users/yannickwittwer/www/PROJECTNAME/app/styles/_global.scss @include gradient-primary;

[timneutkens]

includePaths is not a file loading mechanism. Please reference the Sass documentation on how it works and what it is: https://sass-lang.com/documentation/js-api#includepaths

It basically allows you to avoid typing a full path. Eg:

includePaths: [path.join(__dirname, "app/styles")]

Would allow you to then @import like:

@import "variables.scss"

Instead of writing the full path.

[wityan]

Oh yes I got something wrong here :) Thanks for the hint

[wityan]

How would you import variables global? Still with an custom webpack config?

[franknoel]

Normally you could use the data option, but it doesn't seem to be supported at the moment. Maybe @timneutkens can telll us more about it?

There's also some open issues about this subject: #11617 #12277

[tr1s]

Ah there we go, I also misunderstood this 9.4 feature. I guess we wait!

[DejanDespot]

And how would you change the includePaths for example to write
import classes from "../styles/button.scss";
instead of
import classes from "../styles/button.modules.scss";
How to get rid of the modules part?

[mod7ex]

well if anyone is still facing this issue this is how you can make your stylesheets global

const path = require('path');

const _additionalData = `@use 'global' as *;`;

const additionalData = (content) => {
   return `${_additionalData}\n${content}`;
};

/** @type {import('next').NextConfig} */
const nextConfig = {
   experimental: {
      appDir: true,
   },

   sassOptions: {
      includePaths: [path.join(__dirname, 'assets/scss')], // the global folder is inside assets/scss
      additionalData,
   },
};

module.exports = nextConfig;

[timohausmann]

I built upon this to simply load a library file globally:

const nextConfig = {
    sassOptions: {
        additionalData: `@import "./node_modules/include-media/dist/_include-media.scss";`
    },
};