sass not working in create-react-app

Question

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

Create-react-app uses PostCSS by default, as it is a more modern / modular approach. If you need to use Sass, you will need to update the CSS loader inside webpack.config for the environment you want to use. Please post your webpack config with the question. — Vlatko Vlahek, Apr 06 '18 at 12:51
You can probably find the answer with steps to your issue here: https://stackoverflow.com/questions/40486756/add-sass-to-ejected-create-react-app-config/40487714#40487714 — Vlatko Vlahek, Apr 06 '18 at 12:53
@Vlatko Vlahek I simply followed create-react-app documentation https://github.com/athimannil/create-app#adding-a-css-preprocessor-sass-less-etc — Mo., Apr 06 '18 at 13:12
@Muhammed if you are using *npm start*, it should work. Can you post the log from the terminal when you run the command? Maybe its something silly, like missing ; inside the scss file or something similar. — Vlatko Vlahek, Apr 06 '18 at 13:17
@VlatkoVlahek Exactly, as you can see in the repo it is simply following documentation https://github.com/athimannil/create-app — Mo., Apr 06 '18 at 13:20
Ok. Then, what about terminal / command prompt log. Are there any errors there after running npm start? — Vlatko Vlahek, Apr 06 '18 at 14:36
@VlatkoVlahek Terminal doesn't say anything. At the same time localhost not giving any css style which we did in scss file and also terminal shows it compile when make chances in .scss — Mo., Apr 06 '18 at 16:41

score 4 · Accepted Answer · answered Apr 06 '18 at 15:00

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

score 2 · Answer 2 · answered Oct 04 '18 at 04:14

2

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.

answered Oct 04 '18 at 04:14

Robin Wieruch

14,900
10
82
107

sass not working in create-react-app

2 Answers2