9

I haven't used SASS or SCSS in anything besides codepen before so apologies if this is a basic question, but my CSS was working fine, but I wanted to nest some tags, and when I setup the SCSS and SASS dependencies and changed my filename to .scss, all of my formatting went away. I read something somewhere about importing an scss file into the css file, but I'm not really sure how to accomplish that.

Here's a link to the code sandbox: https://codesandbox.io/s/oj15rk1vw9

Cdhippen
  • 615
  • 1
  • 10
  • 32

2 Answers2

9

Use the Parcel Bundler template instead of the create-react-app template

enter image description here

Also if you're using react add react and react-dom as dependencies since the Parcel Bundler template only comes with parcel as a dev dependency

https://codesandbox.io/s/q7877ov756

Mauricio Poppe
  • 4,817
  • 1
  • 22
  • 30
  • 3
    Is there a way to change the template without having to create a whole new sandbox and copy everything over? – Cdhippen Jul 21 '18 at 06:49
  • I don't know sorry, I know that you can import a project from [Github](https://codesandbox.io/s/github) or with the [cli](https://codesandbox.io/s/cli) – Mauricio Poppe Jul 21 '18 at 07:15
  • I just tried a parcel and copying everything over, and now nothing is displaying at all. Care to look? https://codesandbox.io/s/rw0j2orqmp – Cdhippen Jul 21 '18 at 13:51
  • Just figured it out. It was because I wasn't setting the script in the index. What's the difference between parcel and react templates such that index.html can't be in a public folder and has to explicitly indicate script source in the index.html? – Cdhippen Jul 21 '18 at 14:00
8

If you just change all instances of style.css to style.scss then it'll work

a7dc
  • 3,323
  • 7
  • 32
  • 50
  • 5
    You have to make sure `node-sass` package is installed. [See docs](https://create-react-app.dev/docs/adding-a-sass-stylesheet/). – vsync Nov 10 '19 at 21:14
  • 1
    Also required for me was making sure I had the sandbox template set to `react` and adding these lines to my package.json under the `scripts` group `"build:css": "node-sass src/ -o src/ ",` `"watch:css": "npm run build:css && node-sass src/ -o src/ -w -r"` – Shadoath Oct 31 '20 at 23:25