SASS :export does not work with built-in SASS support throwing 'Selector ":export" is not pure'

[zorzysty]

Bug report

Describe the bug

I use :export syntax to export variables from scss files and import them in JS. This worked great with next-sass, but does not even compile with the built-in SASS support.

To Reproduce

in Component.jsx:

import colors from './component.module.scss'

component.module.scss:

:export {
  white: #ffffff;
  black: #000000;
}

Expected behavior

colors in Component.jsx should be an object that looks something like this:

{
  white: "#ffffff",
  black: "#000000"
}

Actual behavior

It does not compile the scss file and throws:

ModuleBuildError: Module build failed (from ./node_modules/next/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:0) Selector ":export" is not pure (pure selectors must contain at least one local class or id)

System information

• OS: Windows 10 (WSL)
• Version of Next.js: 9.3.4
• Version of SASS: 1.26.3

Additional information

next.config.js does not contain any code related to CSS or SASS

[nkalinov]

Any updates here? Known workaround?

[behivetech]

I also have a need for this as well as the ability to add includePaths.

[delicatesther]

I'm reporting the same problem as zorzysty in Next.js 9.3.6, with Sass 1.23.7. Is anybody looking into this?

[nkalinov]

The issue is that the built-in css-loader options are using by default "pure" CSS modules.
I managed to work around this issue by updating this option for the specific css modules files that we use in our project (.module.scss):

/**
 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
 */
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
  );
};

module.exports = {
  webpack: config => {
    const oneOf = config.module.rules.find(
      rule => typeof rule.oneOf === 'object'
    );

    if (oneOf) {
      const moduleSassRule = oneOf.oneOf.find(rule =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );

      if (moduleSassRule) {
        const cssLoader = moduleSassRule.use.find(({ loader }) =>
          loader.includes('css-loader')
        );
        if (cssLoader) {
          // Use the default CSS modules mode. Next.js use 'pure'. Not sure of all implications
          cssLoader.options.modules.mode = 'local';
        }
      }
    }

    return config;
  },
};

I'm not entirely sure of all the implications that this change might have...

[vavra7]

I am also looking for this functionality which is not working in Next.js. Please fix it!

[timneutkens]

Feel free to fix it @vavra7

[Timer]

Fixed in [email protected].

[lipoolock]

Hello @Timer

I tried to use that feature (SCSS export) and I did not succeed
Here a codesanbox to help to understand what I tried https://codesandbox.io/s/ecstatic-bohr-70qc5?file=/pages/_app.js

Perhaps I'm wrong in the way I've done it ?
If not, do I have to open a new bug ?

Thanks for help

[BigglesZX]

@lipoolock I had to rename my variables.scss to variables.module.scss for this feature to work (from a hint here). That was all!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.