In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Question

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems that the issue lies with the imports I am utilizing, particularly for variables like $cl-light-gray as shown below in this sample file:

@import "src/common/styles/global-styles.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "src/common/styles/palette.scss";
@import "src/common/styles/typography.scss";

.dashboard-dropdown-hover {
  @extend .px-1;
  @extend .py-2;
  @extend .mt-3;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: 200ms;
  background-color: transparent;
}
.dashboard-dropdown-hover:hover {
  background-color: $cl-light-gray;
}

If anyone knows a solution to resolving this import issue, I would greatly appreciate any guidance. While I understand reverting to .scss may solve the problem, I'm hesitant about importing all those .scss files in _app.tsx as it would entail around 30 imports and these styles are not meant to be global. Also, I am puzzled why Next.js insists on using pure css selectors when Sass, known for its non-pure elements, is being utilized.

css sass next.js css-modules react-css-modules

Answer 1

Answer №1

After spending several hours researching online, I stumbled upon a fantastic solution at this link:

UPDATE: For those using Next.js 12, please refer to the end of the mentioned article as the solution may vary slightly.

To implement this solution, you will need to modify your next.config.js file with the following code snippet:

/** @type {import('next').NextConfig} */
require("dotenv").config();
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};
// Customizations for css-loader plugin
function cssLoaderOptions(modules) {
  const { getLocalIdent, ...others } = modules; // Removing getLocalIdent is necessary for localIdentName functionality
  return {
    ...others,
    localIdentName: "[hash:base64:6]",
    exportLocalsConvention: "camelCaseOnly",
    mode: "local",
  };
}
module.exports = {
  webpack: (config) => {
    const oneOf = config.module.rules.find(
      (rule) => typeof rule.oneOf === "object"
    );
    if (oneOf) {
      // Locating the module targeting *.scss|*.sass files
      const moduleSassRule = oneOf.oneOf.find((rule) =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );

      if (moduleSassRule) {
        // Retrieving the configuration object for css-loader plugin
        const cssLoader = moduleSassRule.use.find(({ loader }) =>
          loader.includes("css-loader")
        );
        if (cssLoader) {
          cssLoader.options = {
            ...cssLoader.options,
            modules: cssLoaderOptions(cssLoader.options.modules),
          };
        }
      }
    }
    return config;
  },
};

Although not an expert in webpack and its workings, I found success with this solution. You can also customize the regex pattern to include css by adding (scss|sass|css) if desired.

Answer 2

After spending several hours researching online, I stumbled upon a fantastic solution at this link:

UPDATE: For those using Next.js 12, please refer to the end of the mentioned article as the solution may vary slightly.

To implement this solution, you will need to modify your next.config.js file with the following code snippet:

/** @type {import('next').NextConfig} */
require("dotenv").config();
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};
// Customizations for css-loader plugin
function cssLoaderOptions(modules) {
  const { getLocalIdent, ...others } = modules; // Removing getLocalIdent is necessary for localIdentName functionality
  return {
    ...others,
    localIdentName: "[hash:base64:6]",
    exportLocalsConvention: "camelCaseOnly",
    mode: "local",
  };
}
module.exports = {
  webpack: (config) => {
    const oneOf = config.module.rules.find(
      (rule) => typeof rule.oneOf === "object"
    );
    if (oneOf) {
      // Locating the module targeting *.scss|*.sass files
      const moduleSassRule = oneOf.oneOf.find((rule) =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );

      if (moduleSassRule) {
        // Retrieving the configuration object for css-loader plugin
        const cssLoader = moduleSassRule.use.find(({ loader }) =>
          loader.includes("css-loader")
        );
        if (cssLoader) {
          cssLoader.options = {
            ...cssLoader.options,
            modules: cssLoaderOptions(cssLoader.options.modules),
          };
        }
      }
    }
    return config;
  },
};

Although not an expert in webpack and its workings, I found success with this solution. You can also customize the regex pattern to include css by adding (scss|sass|css) if desired.

Answer 3

Answer №2

It has been highlighted here that there is an alternative approach: incorporating those styles into the global.css file. By following this method, Nextjs will function smoothly.

Answer 4

It has been highlighted here that there is an alternative approach: incorporating those styles into the global.css file. By following this method, Nextjs will function smoothly.

Answer 5

Answer №3

To ensure consistent styling across your entire app, including global styles like :root or specific HTML elements/CSS classes, it's recommended to place them in a dedicated global CSS file. This file should be imported into your _app.js component, which can be added to the root folder of your project if it doesn't already exist. Additionally, any fonts that will be used throughout the app should also be imported in this global CSS file.

For detailed step-by-step instructions on how to implement this, you can visit: https://nextjs.org/docs/basic-features/built-in-css-support

Answer 6

To ensure consistent styling across your entire app, including global styles like :root or specific HTML elements/CSS classes, it's recommended to place them in a dedicated global CSS file. This file should be imported into your _app.js component, which can be added to the root folder of your project if it doesn't already exist. Additionally, any fonts that will be used throughout the app should also be imported in this global CSS file.

For detailed step-by-step instructions on how to implement this, you can visit: https://nextjs.org/docs/basic-features/built-in-css-support

Answer 7

Answer №4

When faced with a similar issue, I discovered that the headache was due to my attempt to import a file using the path:

/node_modules/bootstrap/scss/bootstrap-utilities.scss

This file was then importing another file called _root.scss which had a selector defined in this style:

:root{

 }

To resolve this error, I opted to only import the specific files required for my project's needs.

If you're dealing with a similar problem, consider checking out these additional resources:

Answer 8

When faced with a similar issue, I discovered that the headache was due to my attempt to import a file using the path:

/node_modules/bootstrap/scss/bootstrap-utilities.scss

This file was then importing another file called _root.scss which had a selector defined in this style:

:root{

 }

To resolve this error, I opted to only import the specific files required for my project's needs.

If you're dealing with a similar problem, consider checking out these additional resources:

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Vertically Center Image in a Div

Having trouble with showing dynamic data in column2 of my HTML layout, and the alignment doesn't look quite right in HTML

Is it possible to style an element that has extended beyond its parent container using CSS?

Adjusting the gutter size for specific components in Bootstrap 4 using a mixin

Ways to customize the background color of selected items in ion-list on Ionic

Insert between the top navigation bar and the sidebar menu

Conceal a Component within an Embedded Frame

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

How to achieve a seamless iframe effect using CSS

aligning two elements within a container to have equal heights

Text fields do not show a cursor icon

Is there a way to position text to the right of an image?

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

"Troubleshoot: Why is the Position Absolute Not Functioning in

What are some techniques for applying CSS styling directly to a custom element?

Implement a function that allows users to input a pin code digit by digit using a single HTML input

The text within my div is spilling over the edges despite my attempts to use text align and overflow properties

When employing dynamic URLs in Next.js, hot reloading may be compromised

Attempting to gather data from an HTML form and perform calculations on it using JavaScript