Troubleshoot create-react-app build SCSS Syntax Error

Question

I'm deploying my first react web app, but I'm running into this error:

Failed to compile.
./src/scss/style.scss
ParserError: Syntax Error at line: 1, column 62

I started it using create-react-app, and added CoreUI. npm start compiles and runs great in the browser. When I inspect style.scss from the browser, I get this:

@charset "UTF-8";
/*!
* CoreUI - HTML, CSS, and JavaScript UI Components Library
* @version v4.2.6
* @link https://coreui.io/
* Copyright (c) 2022 creativeLabs Łukasz Holeczek
* License MIT  (https://coreui.io/license/)
*/
:root {
  --cui-blue: #0d6efd;
  --cui-indigo: #6610f2;
  --cui-purple: #6f42c1;
  --cui-pink: #d63384;
  --cui-red: #dc3545;
  --cui-orange: #fd7e14;
  --cui-yellow: #ffc107;
  --cui-green: #198754;
  --cui-teal: #20c997;
  --cui-cyan: #0dcaf0;
  --cui-black: #000015;
  --cui-white: #ffffff;

I don't see anything that looks like a culprit. I've looked in the build folder, and it's not producing a style.scss file. Beyond looking at that, I really don't know how to figure out what might be causing that error.

Wesley LeMahieu · Accepted Answer · 2023-02-07 19:38:15Z

5

+50

If you're using React 18 and are using .scss files like with CoreUI, then you'll need to install node-sass which is currently version 8.

npm install node-sass OR yarn add node-sass

Additionally, node-sass 8 does not play well with react-scripts 4. You'll want to replace that with react-scripts 5:

npm uninstall react-scripts OR yarn remove react-scripts

Then:

npm install react-scripts OR yarn add react-scripts (Should now be v5)

Now CoreUI and any .scss files should play nicely. Here's an example sandbox I created using React 18, Node-Sass 8, React Scripts 5, CoreUI 4.

https://codesandbox.io/p/sandbox/keen-smoke-t12xz8

I can see how initial CRA would cause this issue since it's currently shipping with react-scripts 4.

answered Feb 7, 2023 at 19:38

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Circle B Over a year ago

Thanks, that got me on the track, in the end I had to update all of my dependencies, update react to 18 and it's building beautifully now!

Collectives™ on Stack Overflow

Troubleshoot create-react-app build SCSS Syntax Error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related