Adding sass modules to the CMS custom preview breaks the project

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()
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;

Here are the relevant dependencies:

  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”)

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 Beta Features! | Netlify CMS | Open-Source Content Management System. None of these solved the issue.

Any help would be very appreciated.

Hiya @Des1 :wave:t6:,

It sounds like this is a question about Netlify CMS. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

Hello @SamO :slight_smile:

Thank you for your quick response. I’ve extensively researched the subject on the documentation, GitHub issues, Stack Overflow, and anywhere else I could find on Google. Sadly there are almost no topics found on Netlify CMS sass preview.

I’ve tried to access Netlify Slack but I’m when I try to sign in with the email that I’m using for the forums and for my Netlify account I’m getting this message:

Is this the right email?
It looks like there isn’t an account on Netlify CMS tied to this email address.

Sadly I’m still stuck with no solution to this problem :slightly_frowning_face:

Hi,

Could you try building a CSS file, uploading it somewhere and use its URL to see if the feature is working at all for you?

Hello @hrishikesh,

Thank you for your reply. The feature does work if I simply write CSS instead of SCSS.

Unfortunately, because this is a very large project with a lot of sass variables and mixins, switching over to CSS isn’t really an option.

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`,
      },
    },

Hiya @Des1 :wave:t6: welcome back to the Netlify Support forums! We’re glad you are here. :netliconfetti: Thank you for coming back to this thread and providing us with your solution. This will help other users who are having issues with Gatsby and Netlify CMS. Good luck and happy building! :smiling_face_with_three_hearts:

I was very glad to have a solution to the problem. I hope it helps somebody else too.

1 Like