Sass "Error: Can't find stylesheet to import."

Question

I'm running into an issue which seems similar to the one reported in https://github.com/sass/dart-sass/issues/284, but doesn't seem 'fixed' for me. I'm trying to follow the workflow described in https://getbootstrap.com/docs/4.1/getting-started/theming/ to import Bootstrap's SCSS source code.

Here is my (simplified) directory structure:

.
├── index.html
├── node_modules
│   ├── @mdi
│   └── bootstrap
├── package-lock.json
├── package.json
├── scss
│   └── peek-solutions2.scss
└── stylesheets
    └── peek-solutions.css

I've installed Bootstrap using npm install bootstrap; my package.json contains the following dependencies:

{
  "dependencies": {
    "@mdi/font": "^2.2.43",
    "bootstrap": "^4.1.1"
  }
}

In peek-solutions2.scss, I've added the following line:

@import "../node_modules/bootstrap/scss/bootstrap";

I've tried the sass --watch command specifying input and output files in different directories (cf. https://sass-lang.com/guide), but I run into an import error:

Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ sass --watch scss/peek-solutions2.scss:stylesheets/peek-solutions2.css
Error: Can't find stylesheet to import.
@import "functions";
        ^^^^^^^^^^^
  ../node_modules/bootstrap/scss/bootstrap.scss 8:9  @import
  scss/peek-solutions2.scss 1:9                      root stylesheet

Sass is watching for changes. Press Ctrl-C to stop.

It seems like this is a path issue; _functions.scss is in the same directory as bootstrap.scss in node_modules/bootstrap/scss, but it seems like the sass command is expecting it to be in my custom scss directory. How can I fix this?

Answer 1

just delete the dots in the beginning , you must write:

@import "node_modules/bootstrap/scss/bootstrap";

in your scss file

Answer 2

This happened to me because I was running ng build --prod within a folder other than the root project folder, and every other css import breaks.

The solution is to cd to the root folder.

Answer 3

I solved it by using an extra forward slash @import "//abstracts/variable";