wmonk/create-react-app-typescript

Sass support as in create-react-app >=2.0

Meyhem opened this issue · 5 comments

Meyhem commented

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Not tried

npm -v
6.1.0

Which terms did you search for in User Guide?

sass / scss

Environment

npm ls react-scripts-ts
react-tstemplate@0.1.0 C:<omitted>
`-- react-scripts-ts@2.17.0

node -v
v10.2.1

yarn --version
1.7.0

OS: Windows

Steps to Reproduce

  1. yarn create react-app --scripts-version=react-scripts-ts
  2. yarn add node-sass # (as per official docs https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet)
  3. create some .scss stylesheet
  4. import it into component
  5. No error while importing, but stylesheet has no effect

Expected Behavior

react-scripts-ts should behave same as react-scripts (version >=2.0) and correctly import .scss / .sass files

Actual Behavior

Sass files have no effect

Reproducible Demo

https://github.com/Meyhem/react-scripts-ts-scss-bug-demo

wmonk commented

#409

  • 👍1
Meyhem commented

Tried with yarn create react-app --scripts-version=react-scripts-ts@4.0.8 and Sass is working like a charm. Thanks!

  • ❤️4
StJohn3D commented

I already created an app, so I just upgraded my package.json to have "react-scripts-ts": "4.0.8" and it's working now. Except that npm start now launches the browser before it's finished compiling and I have to manually refresh the browser once compilation has completed. Is there a way to stop it from launching the browser automatically in npm-start, or at least fix it so the browser actually refreshes once compilation is complete?

  • 👍1
elektronik2k5 commented

@StJohn3D adding a BROWSER=none environment variable (in any supported way) should do the trick.

  • ❤️1
StJohn3D commented

@elektronik2k5 Thanks for that, good stuff to know. Fortunately it started working again last night so for now I'll just leave well-enough alone.

  • 👍1