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

abdhalees commented 3 years ago

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

install gatsby-plugin-sass

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

```shell
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 commented 3 years ago

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] commented 3 years ago

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] commented 3 years ago

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 commented 5 months ago

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

gatsbyjs / gatsby