CODEWITHSUNDEEP
sassnode-sass-chokidar
Canovice
Canovice

Reputation: 10173

replacing node-sass-chokidar with sass, Error: Can't find stylesheet to import

Using the answer from this post Replace options of node-sass-chokidar to dart-sass to update our build-css and watch-css scripts in our react app. However, we are getting a new error that it is unable to find stylesheets:

nicholas@MacBook-Pro-4 client % npm start

> [email protected] start
> npm-run-all -p watch-css start-js


> [email protected] watch-css
> npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch


> [email protected] start-js
> react-scripts start


> [email protected] build-css
> sass -I ./src -I ./node_modules src/:src/

Error: Can't find stylesheet to import.
  ╷
2 │ @import 'node_modules/bootstrap/scss/functions';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/App.scss 2:9  root stylesheet
ERROR: "watch-css" exited with 65.

Here are the scripts in our package.json:

    "scripts": {
        "build-css": "sass -I ./src -I ./node_modules src/:src/",
        "watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch",
        "start-js": "react-scripts start",
        "start": "npm-run-all -p watch-css start-js",
        "build": "react-scripts build --stats",
        "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

In our /client/src/styles directory, we have App.scss, fonts.scss, tables.scss which are the 3 .scss files that our react app uses. I tried updating src/:src/ to src/styles/ however this did not work either, threw the same error. How can I correctly point to our 3 stylesheets in the /styles directory?

Edit: I followed the path and noticed in node_modules/bootstrap/scss/ that functions did not exist. This import was happening in our src/styles/App.scss file

src/styles/App.scss

@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins/_breakpoints';
...

enter image description here

There is an _functions.scss, however when I rename the import to include the _, unfortunately the original error Error: Can't find stylesheet to import. does not go away. Adding a .scss doesn't help either.

Upvotes: 0

Views: 1605

Answers (1)

Canovice
Canovice

Reputation: 10173

The issue was the import in our App.scss file, which needed to be updated from @import 'node_modules/bootstrap/scss/functions' to @import '../node_modules/bootstrap/scss/_functions'.

I am not sure why, previously, the path without the ../ was working. I am also not sure if/why the bootstrap/scss filenames were changed to include an _. Had I read the error messages more carefully initially I probably would have resolved this sooner.

Upvotes: 0

Related Questions