Styles not loading for custom widget in CMS

[mcdowellalex]

Short description: I am using react/gatsby and netlify cms. I am making a custom widget and the styles are not loading. My goal is to use css classes. The styles work as intended when the component is used on a page in the site but not when it is used in the CMS.

For example: mywidget.css

.customStyle{
    background:red
}

myWidget.js

<div className="customStyle" />

The above component will render the background red if I use the component on a normal page, like the home page of the site. However, the background is not red when I use the same component in the CMS.

To reproduce: create a custom widget. try and import any "test.css" file. use css class like this:

<div className="some class" />

Versions: all should be the most recent. here are the dependencies in my package.json

"dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@reach/dialog": "^0.15.3",
    "@reach/router": "^1.3.4",
    "@reach/visually-hidden": "^0.15.2",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.4.6",
    "babel-preset-gatsby": "^2.4.0",
    "draft-js": "^0.11.7",
    "draft-js-custom-styles": "^2.1.1",
    "draftjs-to-html": "^0.9.1",
    "gatsby": "^3.11.0",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-catch-links": "^3.11.0",
    "gatsby-plugin-gdpr-cookies": "^2.0.6",
    "gatsby-plugin-html-attributes": "^1.0.5",
    "gatsby-plugin-image": "^1.11.0",
    "gatsby-plugin-manifest": "^3.11.0",
    "gatsby-plugin-mdx": "^2.11.0",
    "gatsby-plugin-netlify-cms": "^5.11.0",
    "gatsby-plugin-react-helmet": "^4.11.0",
    "gatsby-plugin-sharp": "^3.11.0",
    "gatsby-plugin-sitemap": "^3.3.0",
    "gatsby-plugin-theme-ui": "0.12.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^3.11.0",
    "gatsby-transformer-remark": "^3.2.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "gatsby-transformer-yaml": "^3.11.0",
    "identity-obj-proxy": "^3.0.0",
    "immutable": "^4.0.0",
    "jest": "^27.4.7",
    "netlify-cms-app": "^2.15.33",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-cookie-consent": "^6.2.3",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-helmet": "^6.1.0",
    "react-range-step-input": "^1.3.0",
    "react-slick": "^0.28.1",
    "react-test-renderer": "^17.0.2",
    "showdown": "^1.9.1",
    "smooth-scroll": "^16.1.3",
    "theme-ui": "^0.12.1"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.16.7",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.23.3",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.4.1",
    "eslint-plugin-react": "7.23.2",
    "prettier": "2.3.2"
  },

Additional context My custom widget works fine when I use style rather than className, but I need to use className in this context. And I didn't add the whole project and custom widget component because that is not the issue here, all of that functions properly. The issue is simply that css does not load into a component in netlify CMS

[mcdowellalex]

I have seen some solutions to issues like this (in other contexts, not necessarily in netlifyCMS) that modify the config for the css loader. I believe that netlifyCMS uses the css-loader package, a part of webpack, but I'm not sure.

But, others with issues like this found that adding something like

options: {
    modules: false
}

to the webpack config solved it.

I don't know exactly where to go in a gatsby/netlifyCMS project to try this though.