Is there a way to import scss file to react component with react-create-app?

Question

I'm trying to start using scss instead of css in my React project with create-react-app.
I'm using this guide

Now my package.json looks like this

    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",

It creates css file from scss files but if I were to

import './App.scss';

In my App.jsx styles won't apply. But they will work if I change it to import './App.css';

Is this suppose to happen? Is there a way to import scss files, not css?

Ivo · Accepted Answer · 2018-08-12 08:45:24Z

As mentionned in the official documentation you refer to :

Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated.

It is therefor not working to import the scss file but rather the css file in the component. Thanks to the configuration you made the css file will be 'built' based on the scss file each time you run your app. It is indeed the normal behaviour.

However would you like to import scss file within another scss file :

To share variables between Sass files, you can use Sass imports. For example, src/App.scss and other component style files could include @import "./shared.scss"; with variable definitions.

also as a recommended practice you should remove the .css file from your version control :

At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file. It is generally a good practice to keep the build products outside of the source control.

Collectives™ on Stack Overflow

Is there a way to import scss file to react component with react-create-app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related