Production build fails with global SCSS files

[peteorpeter]

The production build fails when there are global SCSS files imported.

Minimal repo for reproducing: https://github.com/peteorpeter/gatsby-plugin-scss-typescript-test

The error:

TypeError: Cannot read property 'split' of undefined
at CssModule.nameForCondition (/Users/petejones/projects/livefront/gatsby-plugin-scss-typescript-test/node_modules/mini-css-extract-plugin/dist/index.js:77:39)

It's quite possible that this isn't a bug and the solution is to find the right cssLoaderOptions in gatsby-config.js, but I have not found a combination that works.

I have tried a variety of suggestions from webpack-contrib/mini-css-extract-plugin#156 and elsewhere.

---

To reproduce, clone this repo and run:

yarn
yarn run build
# 💥 BOOM!

The development build runs without error. Commenting out the import of global.scss removes the error in the production build.

---

Many thanks for developing this plugin! Even if this (maybe) bug were never resolved I'd work around this to keep using typed SCSS modules.

[Debens]

Thanks for reporting, and thanks for providing a reproducible environment! <3

I'll have a dig over the weekend!

For now try adding some options to loader, long shot, but might as well shoot eh?

{
        resolve: 'gatsby-plugin-scss-typescript',
        options: {
            cssLoaderOptions: {
                importLoaders: 1,
            },
        },
    }

[Debens]

Take a look at using release v4.0.0, but note there are some breaking changes.

[peteorpeter]

🎊

Global SCSS is working great for me with v4. Many thanks @Debens!