SASS and SourceMap woes

[foxinni]

Is this a bug report?

No

Problem

I've given this a fair amount of time but I simply cannot got to any elegant solution if any. I've setup my project to use SASS and node-sass-chokidar to read and compile the sass into my src directory.

When using import './App.css'; there is no way to inspect elements and get their location in SASS due to the inlining and no reference to the map file. Element locations only read as <style></style> in the inspector.

Any option to put the css and map file into the public folder creates a full reload and makes the development process with css even more painful.

I feel i might be missing something here, because the default configuration is simply not an efficient way to write and maintain SASS, along with keeping all the hot reloading tech in place.

Any help would be much appreciated.

Thanks

[Timer]

Are you comfortable testing the v2 beta? It has native support for Sass. 😄

npm upgrade react-scripts@next

[foxinni]

Hi,

Installed with npm install react-scripts@next. Nothing but problems.

Github issues all over the place in terms of clear instructions, with many issues claiming it's not working, not to mention support for source maps.

Got to a point where I think I have every thing is set up, but it refuses to read my scss files with import './assets/frontend.scss. Would love to get this sorted but just too much of a risk to use something this new in my production app.

[Timer]

Closing because v2 has Sass support.

[mustafaabobakr]

Still same issue for v2

[tnhu]

The issue is still persisted with 2.0.4 (both CSS and SASS). Please consider to re-open this.

[orszaczky]

I upgraded react-scripts to the latest, added node-sass as a dependency, and to get sourcemaps working, I had to add --source-map true (or --source-map custom-path/to/whatever.map) to my package.json like:

"scripts": {
    "build-css": "node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css",
    "watch-css": "npm run build-css && node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css --watch --recursive",

[mustafaabobakr]

@orszaczky i tried your solution but didn't work
maybe i did something wrong !
package.json

{
  "name": "age",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.5"
  },
  "scripts": {
    "start": "react-scripts start node-sass --source-map true --include-path ./src --include-path ./node_modules ./src/scss -o",
    "build": "react-scripts build node-sass --source-map true --include-path ./src --include-path ./node_modules ./src/scss -o",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "node-sass": "^4.9.3",
    "source-map-loader": "^0.2.4"
  }
}

the issue is source-maps doesn't show in development or "yarn start" which is crucial

[orszaczky]

@mostafaabobakr7 This is my full config, hope it helps. I'm not using yarn, but it works for me with npm.
("[email protected]", "[email protected]", "[email protected]" and running npm 6.1.0)
I also just tested with "[email protected]" and also creates the map files as expected.

"scripts": {
    "build-css": "node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css",
    "watch-css": "npm run build-css && node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css --watch --recursive",
    "start-js": "set PORT=4000 && 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"
  }

[mustafaabobakr]

@orszaczky

Could you please tell me what is wrong with my approach to get your solution to work ?

Here is screenshot of folder setup and scripts

[mustafaabobakr]

GUYS
I filed a new issue
follow it here #5707
Tweet
https://twitter.com/MustafaAbobakr/status/1058996967970406401