[gatsby-plugin-sass] could not override css-loader to use icss mode

[abdhalees]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

after migrating to gatsby v3 and gatsby-plugin-sass v4 which uses v5 of webpack and css-loader I could no longer use :export in my .scss files, it just exports undefined, this change is documented in css-loader and there is an example how to bring the old functionality back: https://github.com/webpack-contrib/css-loader#separating-interoperable-css-only-and-css-module-features

however, when I add these options to gatsby-plugin-sass nothing changes

Reproduction Link

https://codesandbox.io/s/quizzical-butterfly-88o4h?file=/src/components/layout.js:320-366

Steps to Reproduce

1. install gatsby-plugin-sass
2. add to gatsby-config with these options:

   {
      resolve: `gatsby-plugin-sass`,
      options: {
        cssLoaderOptions: {
          importLoaders: 1,
          modules: {
            mode: "icss"
          }
        }
      }
    },
 

3. create a .scss file and use :export to export a variable
4. try importing the above variable from a js/jsx/ts/tsx file

Expected Result

css-loader mode to change to icss variables to be exported from .scss files

Actual Result

css-loader mode does not change

Environment

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 78.10.1
    Safari: 14.1.2
  npmPackages:
    gatsby: ^3.12.0 => 3.12.1
    gatsby-plugin-csp: ^1.1.3 => 1.1.3
    gatsby-plugin-exclude: ^1.0.2 => 1.0.2
    gatsby-plugin-image: ^1.12.0 => 1.12.0
    gatsby-plugin-layout: ^2.12.0 => 2.12.0
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1
    gatsby-plugin-postcss: ^4.12.0 => 4.12.0
    gatsby-plugin-react-helmet: ^4.12.0 => 4.12.0
    gatsby-plugin-sass: ^4.12.0 => 4.12.0
    gatsby-source-contentful: ^5.12.0 => 5.12.0
    gatsby-plugin-schema-snapshot: ^2.12.0 => 2.12.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.24 => 1.1.24
    gatsby-source-filesystem: ^3.12.0 => 3.12.0

Config Flags

No response

[graysonhicks]

I think this is because gatsby-plugin-sass is hardcoding modules: false here for .scss files. Could be as simple as putting the ...cssLoaderOptions after the hardcoded options there.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[allankikkas]

This pretty much kills module cross-referencing as icss is mode is required for non-module scss files.