CODEWITHSUNDEEP
reactjswebpacksasscreate-react-appnode-sass-chokidar
Mo.
Mo.

Reputation: 27503

sass not working in create-react-app

Sass does not compiling in create-react-app. The current package.json structure is 

{
  "name": "create-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "dependencies": {
    "node-sass-chokidar": "^1.2.2",
    "npm-run-all": "^4.1.2",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.4",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "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",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Repo: https://github.com/athimannil/create-app

enter image description here

Upvotes: 4

Views: 16353

Answers (2)

Robin Wieruch
Robin Wieruch

Reputation: 15908

The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. Checkout this application's Navigation component.

Upvotes: 2

Gabriel Bleu
Gabriel Bleu

Reputation: 10224

It is working fine, npm start watch your .scss files and output .css files as expected.

Make sure to require the .css files in your components.

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.

Also since .css files are now generated, you should remove them from your SCM.

At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file.

doc

Upvotes: 4

Related Questions