CODEWITHSUNDEEP
typescriptsasscreate-react-app
Bjerh
Bjerh

Reputation: 71

Create-react-app 2.1.1: Sass doesn't really load

I have a small application running with react-scripts-ts (3.1.0) and node-sass (4.10.0) added.

When I import say "./App.scss" no import error is shown - but no styles are being added. Neither importing as a module or importing regularly works.

Any ideas? :\

Package.json dump:

{
  "name": "reason-md-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@veracity/ui-react": "0.2.66396",
    "bootstrap": "3.3.7",
    "node-sass": "4.10.0",
    "react": "16.6.3",
    "react-bootstrap": "0.31.5",
    "react-dom": "16.6.3",
    "react-redux": "5.1.1",
    "react-router-bootstrap": "0.24.4",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.8",
    "react-scripts-ts": "3.1.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "rimraf": "2.6.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "3.1.6",
    "@types/enzyme-adapter-react-16": "1.0.1",
    "@types/jest": "23.3.9",
    "@types/node": "10.12.6",
    "@types/react": "16.7.6",
    "@types/react-dom": "16.0.9",
    "@types/react-redux": "6.0.9",
    "@types/react-router-dom": "4.3.1",
    "@types/redux-logger": "3.0.5",
    "enzyme": "3.2.0",
    "enzyme-adapter-react-16": "1.1.0",
    "enzyme-to-json": "3.3.0",
    "prettier": "1.15.2",
    "react-router-test-context": "0.1.0",
    "redux-logger": "3.0.6",
    "tslint-config-prettier": "1.16.0",
    "typescript": "3.1.6"
  }
}

Upvotes: 2

Views: 701

Answers (2)

Bjerh
Bjerh

Reputation: 71

The issue was with the react-scripts-ts. I ended up using the regular react-scripts package since it now contains typescript support - and then the issues went away.

Upvotes: 0

p7adams
p7adams

Reputation: 662

The best solution would be to follow these instructions from official documentation. Try to reproduce this step by step: CRA DOCS

First install node-sass and make sure it's saved in your project dependencies than rename App.css to App.scss and include it into your index.js entry point JavaScript file. Sometimes you need to play with index.css file - remove it and make sure to remove all imports to this file from other .js files.

Upvotes: 1

Related Questions