React with SASS - How to work with SASS in React

user_5516725 0
Viewed 944

So, the basic usage of SASS in react is

Install node-sass and import ./mysass.scss in index.js file

I did the same it worked with bootstrap SASS.

I have successfully imported bootstrap.scss in index.js file

import 'bootstrap/scss/bootstrap.scss';

But, now if I try to import mine it did not work.

Let me give you some information about my SASS files.

  • My style.scss file importing other CSS modules by using @use instead of @import in sass.

    For example

      Using -> `@use 'sections/navbar';`
  Instead of  -> `@import 'sections/navbar';`

  • I am also using @use "sass:map";

Does this @use create the problem?

I have checked the bootstrap.scss file and they are using @import.

reactjs sass css
1 Answers

See this issue on Github: Link. Solution posted by user asyncLiz.

That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.

Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.

If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').

user_33153330
Related