Cannot import scss/sass

Prerequisites

• Using yarn
• Using an up-to-date master branch
• Using latest version of devtools. Check the docs for how to update
• Tried solutions mentioned in #400
• For issue in production release, add devtools output of DEBUG_PROD=true yarn build && yarn start

Expected Behavior

While importing [.scss/.sass] files, the application (yarn dev) should build with no errors.

Current Behavior

When I import [.scss/.sass] files (ex changing Home.css to Home.scss), the application (yarn dev) gives me this error:

ERROR in ./app/components/Home.scss
Module build failed (from ./node_modules/typings-for-css-modules-loader/lib/index.js):
Error: Cannot find module 'css-loader/locals'

Steps to Reproduce

1. Change the file ./app/components/Home.css to ./app/components/Home.scss (or .sass)

2. Change the file ./app/components/Home.tsx to reflect the change mentioned above.

3. Run yarn dev

Possible Solution (Not obligatory)

Probably Webpack is not properly configured to process scss/sass, even though it has rules to deal with those file extensions.

Context

I’m trying to use scss/sass files, as it is common in React, and this error is happening.

Your Environment

• Node version : v12.18.1
• electron-react-boilerplate version or branch : master
• Operating System and version : Windows 10

[amilajack]

This might have been fixed in the most recent version of ERB, released yesterday. Please check if those changes work for you

[megancooper]

@amilajack Is this still an ongoing problem? I have the latest version of ERB (v2.1.0) and am still encountering an issue where I can’t import *.scss files from a *.tsx file.

Cannot find module './style.scss' or its corresponding type declarations.ts(2307)

Update:

I was able to remove this typescript error by adding a declaration.d.ts file in the root project directory with the following contents:

StackOverflow Issue

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts').
declare module '*.scss';