CODEWITHSUNDEEP
reactjssasscreate-react-app
Gabriel Yshay
Gabriel Yshay

Reputation: 63

how can I use sass with the new create react app?

Apparently Sass has been included with the new create react app(2.0.0 onwards). But as a web noobie I don't quite get why, when I try to apply styles, they don't show up. I'm using react-scripts-ts like create-react-app my-app --scripts-version=react-scripts-ts). Thanks!

Upvotes: 1

Views: 2173

Answers (2)

Porkopek
Porkopek

Reputation: 1012

Update: Create your app with

create-react-app your-app-name

No scripts version needed. Then install node-sass

yarn add node-sass

and then import the sass file directly in your component with

import './my-component-styles.scss'

I think webpack is who is compiling now the sass files, so you can use them the same way as css files

Upvotes: 2

MBehtemam
MBehtemam

Reputation: 7919

first you should install node-sass-chokidar

npm install node-sass-chokidar --save-dev

and also npm-run-all so:

npm install npm-run-all -g

then change these in package.json:

 "start": "react-scripts start",
 "build": "react-scripts build",

to : 

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

now if you create a mycomponent.sass inside of your component just import it like : 

import './mycomponent.css'

Upvotes: 0

Related Questions