Search code examples
sassadminnetlifypreviewnetlify-cms

Adding SASS modules to Netlify CMS custom preview breaks Gatsby

Summary The project works without issues with SASS modules. Trying to use SASS inside src/cms/cms.js for the purposes of customizing the CMS admin preview panel breaks the project. Using regular CSS or CSS modules works without any problem for the admin preview panel.

I've checked for this issue on GitHub, the Netlify CMS forums and documentation, Stack Overflow, and everywhere that Google has led me.

Describe the bug My project uses Netlify CMS and Gatsby. I have no issues with SASS when working on the project. The issue only comes up when I try to use SASS inside components that I want to use as custom preview with CMS.registerPreviewTemplate() for the CMS Admin panel at http://localhost:8000/admin/. I've setup up everything without any issues and there are no problems when I use CSS modules.

The problem is that my project uses SASS and when I just rename import * as styles from PreviewTesting.module.css to import * as styles from './PreviewTesting.module.scss' inside PreviewTesting.jsx I get this error:

 ERROR  Failed to compile with 1 error                                                                                            6:03:26 PM
⠀
 error  in ./src/templates/previewTesting/PreviewTesting.module.scss
⠀
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
> .previewTestingDescription {
|   background-color: lightgoldenrodyellow;
|   font-family: 'Montserrat-Regular', sans-serif;

Also, just adding import '../styles/global.scss' inside the src/cms/cms.js file causes the same error that prevents the build from happening.

I've tried updating and downgrading any package I could think of and this did not help. I've also tried to register the files as preview styles with CMS.registerPreviewStyle(file); and I've tried Raw CSS with https://www.netlifycms.org/docs/beta-features/#raw-css-in-registerpreviewstyle. None of these solved the issue.

To Reproduce Steps to reproduce the behavior. For example:

  1. Create a React component.
  2. Import a SASS module component into the React component.
  3. Register that component as a preview component with CMS.registerPreviewTemplate('name', PreviewTesting) inside src/cms/cms.js

An alternative way to reproduce:

  1. Add import '../styles/global.scss' inside the src/cms/cms.js. global.scss hold regular SASS things like imports for fonts, variable and other such things.

Expected behavior The project should run and apply the CSS styling to the preview panel at http://localhost:8000/admin/

Screenshots image

Applicable Versions:

  1. "gatsby": "^4.9.0"
  2. "gatsby-plugin-netlify-cms": "6.25.0"
  3. "gatsby-plugin-sass": "5.25.0"
  4. "netlify-cms-app": "^2.15.72"
  5. "sass": "1.49.9"
  6. "gatsby": "^4.9.0" (updated to the latest version "4.25.1")
  • Node.JS version: Did not work on v16, updated to v18.12.1, still does not work.

CMS configuration

collections:
  - name: "name"
    label: "names"
    label_singular: "name"
    description: >
      Test
    create: true
    slug: "{{category}}-{{slug}}"
    fields:
      - { name: title, label: Title }
      - { name: subtitle, label: Subtitle, required: false }

Additional context Any help would be very appreciated.

Solution

  • A friend of mine provided me with a solution:

    The plugin order in gatsby-config.js actually matters in this case. gatsby-plugin-sass must come before gatsby-plugin-netlify-cms

    The plugin segment in gatsby-config.js should look like this:

        {
      resolve: 'gatsby-plugin-sass',
      options: {
        additionalData: '@use "/src/styles/global" as *;',
        sassOptions: {
          includePaths: ['src/styles'],
        },
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },