Gatsby: CSS modules not working with `gatsby-plugin-less` in production build

[julianguyen]

Description

I have CSS modules working with gatsby-plugin-less in development (without having to use .module.less), however when I build the production site it's not working.

Steps to reproduce

The following gatsby-plugin-less config is used in gatsby-config.js:

{
  resolve: `gatsby-plugin-less`,
    options: {
      javascriptEnabled: true,
      cssLoaderOptions: {
        modules: true,
    },
  }
}

I have the latest version of gatsby-plugin-less and less as dependencies.

In production, the className is not substituted with the unique hash e.g. className="{stylesheet.test}" would yield class="test-45kjdf9" that's substituted in development.

I notice in a file like public/styles-d07fbb57178d9cf7cc46.js, the styling for the test class appears.

[LekoArts]

Thank you for opening this!

This part is not necessary as the plugin already supports CSS modules by default:

cssLoaderOptions: {
        modules: true,
    },

I set up this example project and after running gatsby build and gatsby serve I also see the hashed class names: https://github.com/LekoArts/gatsby-less-issue

Please try removing the mentioned part from above and see if it works for you.

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby!

[julianguyen]

@LekoArts My issue is that I'm trying to get LESS and CSS modules working without having to have name your files with the .module.less extension. Your repo uses the .module.less extension. Unfortunately, this still doesn't answer my question.

Using:

cssLoaderOptions: {
        modules: true,
    },

allowed me to have CSS modules without having the .module.less extension in the dev environment. My problem is that it's not working in production.

Can someone please re-open the issue?

[LekoArts]

Mh, I missed that part. I also see it happening, yeah.

[julianguyen]

Any updates on this? :)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!

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! 💪💜

[programmer-yang]

i had a similar problem

my problem is that CSS gets lost on the front page
child page normal

"gatsby-plugin-less": "^3.0.17"
"less": "^3.10.3",

// gatsby-config.js plugins
    {
      resolve: "gatsby-plugin-less",
      options: {
        cssLoaderOptions: {
          modules: true,
        },
      },
    },

[prichey]

I'm seeing this as well 😔

[mmende]

I don't know if this belongs here but I have a similar problem with gatsby-plugin-sass. Works perfectly fine in development but as soon as I build the site all *.scss imports seem to be ignored completely. Is there maybe something wrong with the css loader?

[mmende]

I also encountered the problem when trying to load css files from libraries. However when I copy those files to my sources and import them with relative path's the css finally ends up in the build. Importing scss files with relative path's still didn't work however.