Configure to load SASS file

[ted-mfv]

Hi everyone,

I am now struggling to import SCSS to integrate with jest-preview
Everything works just fine, except that it is not loading css when I preview it.

My project is created by create-react-app, and its structure look like this:

public
src
       assets
              stylesheets
                     scss (a folder that contains style for different pages )
                     application.scss (import style from above folder and things like bootstrap, ...)
...

How can I configure the src/setupTests.js to support loading css in this case.

I tried to import directly using this code block, it didn't work. My test files were unable to run 🙁

import 'assets/stylesheets/application.scss';

Another keyword is sassLoadPaths, I tried but nothing happen.

Any help would be appreciated 🙇

[nvh95]

[UPDATE] See the answer here: #153 (reply in thread)

@ted-mfv Hi. We would love to help. Can you try to create a reproduction repo so we can work on?
cc: @ntt261298

[ted-mfv]

@nvh95 @ntt261298

Sorry for my late response, I didn't pay attention to the notification

I created a reproduction repository here:
https://github.com/ted-mfv/jest-preview-demo

• The application can be start normally using yarn start
• I ran yarn test with debug and yarn jest-preview, everything work fine, except it did not load the scss file

Please help me import the global stylesheet file inside src/assets/stylesheets/application.scss with jest-preview

Thank you very much !

[nvh95]

@ted-mfv Sure. We will take a look ASAP.

[nvh95]

Hi @ted-mfv,

I spent a bit of time investigating and I made a PR to configure your project to work with SASS. I put it here: ted-mfv/jest-preview-demo#1.

There are a few things to notice:

1. Your project are using sass version 1.34.1, which is an old version and does not have sass.compile - which is used internally by jest-preview. I updated it to 1.53.0 and it works fine. We will discuss in our team to resolve this in next version (support a minimum version of sass, of fallback to another method other than sass.compile cc: @ntt261298 )

2. You haven't import your global .scss (which is located in src/index.tsx) file yet.

// src/setupTests.js
+import './assets/stylesheets/application.scss';

3. There is an issue with jest-preview that cannot import bootstrap implicitly (@import "~bootstrap";) cc: @ntt261298. The current workaround as follow:

 @import "~bootstrap/scss/bootstrap";

We will investigate and fix this in upcoming versions.

Thank you again for your report. It's super valuable. It helped us catch bugs that we didn't notice. We will let you know once the new version is out, so you don't have to workaround anymore.

[ted-mfv]

@nvh95 Thank you very much for your support. It is extremely fast 😄

I made a try to my original repository followed by your suggestion and it worked 🔥

[nvh95]

Thank you. Please Mark as answer so others with the same issue can follow along. Thanks.