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?

Ford

Answer 1

I finally worked around this problem by using Grunt instead of sass to compile and watch the SCSS files. After running npm install grunt --save-dev, npm install grunt-contrib-sass --save-dev, and npm install grunt-contrib-watch --save-dev, I added the following Gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {                              // Task
      dist: {                            // Target
        files: {                         // Dictionary of files
          'stylesheets/main.css': 'scss/main.scss',       // 'destination': 'source'
        }
      }
    },
    watch: {
      scripts: {
        files: ['**/*.scss'],
        tasks: ['sass'],
      },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['sass']);

};

Now if I run grunt watch, whenever I save scss/main.scss it gets compiled into stylesheets/main.css:

Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ grunt watch
Running "watch" task
Waiting...
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task

Done.
Completed in 1.720s at Sun Jul 01 2018 14:41:11 GMT-0700 (PDT) - Waiting...

Ford

Answer 2

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

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

in your scss file

Geralyngeraniaceous

Hello, @adaout, and welcome to Stack Overflow. Given that the node_modules folder is in the parent directory, wouldn't removing the preceding dots (../) instruct the code to look in the non-existent scss/node_modules/bootstrap/scss/bootstrap folder? – Electro

This doesn't work. – Hydrotropism

This can work if you are running sass from the parent folder. Adding some explanation of this would benefit this answer. – Flaccid

I really didn't expect this to work, but it did! My @imports were slightly different: @import '~bootstrap/scss/card';. Removing the ~ worked. – Divers

Answer 3

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.

Integumentary

Or ng serve elsewhere other than the root (just outside src) – Palish

Answer 4

I solved this issue by pointing the imports to the files directly, i.e:

@import 'style/components/palette'; 

to

@import 'style/components/_palette.scss';

Holmquist

Thanks for sharing. I had this problem when using NX. This answer works. But why does this solve the issue? – Back

same. works for me. – Orchidaceous

work for me too. I think its because it is root directory for app entrypoint – Thunderstruck

Answer 5

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

Noiseless

Do You know why it works? I can't find answer for this. – Messmate

same, what is this sorcery? – Redfin

This isn't actually a solution, all this does is tell your stylesheet to import a remote resource. While webpack no longer throws an error, you likely won't see the stylesheet loaded in the compiled styles. – Sincerity

I don't get an error, but unfortunately the import didn't happen. Failed to import style files – Absorbance

Answer 6

For those using the sass NPM package and have their own NodeJS build script, make sure that you provide loadPaths as an options parameter in your compile or compileAsync method. For example:

import sass from 'sass';
// const sass = require('sass');

const build = async () => {
    await sass.compileAsync('./src/index.scss',
        {
            sourceMap: true,
            style: 'expanded',
            loadPaths: ['./src']
        }
    );
};

Here ./src is where your main scss file resides, relative to your project directory. You might not need this configuration if the index file is in project root, but most people probably don't put their scss files there.

Marc

I was launching the task by NPM script instead of the GRUNT one – Goodoh

thanks that was useful, I would also point out that it also work in the CLI, which is what I'm using, with the use of --load-paths as per docs: sass-lang.com/documentation/cli/dart-sass#load-path and in my case I just added --load-path=node_modules and finally external libs imports started working as they should :) – Dress

Answer 7

If, for example your index.scss file is in a directory called 'sass' e.g.

├── node_modules
├── sass
│   └── index.scss

then you should use this file path:

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

Spellbind

Answer 8

I also got this error and I solved it just using the relative path, like this: @import '../../node_modules/bootstrap/scss/bootstrap';

Montane

Answer 9

I installed the bootstrap old version which didn't add scss folder in bootstrap under my node module, so I uninstalled my bootstrap by the command npm uninstall bootstrap and installed it back by npm i bootstrap.

Eureka

Answer 10

If you're using rails and trying to get production to work, you may have run the production command to build assets in your dev environment. For instance:

yarn build:css

or

sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules

Either way, Rails may be preferring the "built" assets over the dev ones. So you may already have fixed the issue with bootstrap and not know it! Remove your build directory:

rm -rf app/assets/builds

and your other asset files will be used.

Boo

Answer 11

I faced this issue in Laravel 9. Remove this symbol. ~

// Bootstrap @import "bootstrap/scss/bootstrap";

Circumvolution

Answer 12

Importing this bootstrap .scss file directly by using the relative path pointing to the node_modules content worked in my case. Webpack really could not make it work.

Another solution in my case was simply removing the '~' before the path:

@import 'bootstrap/scss/bootstrap.scss';

Glazing

Answer 13

enter image description here

To resolve this problem, I've removed the special character (~) that is present in the mentioned in the path as such (~). The Path that begin with ~ or . or .. will be called as relative path.

Example for relative path

~/ed-grid/ed-grid/
./ed-grid

~ It denotes the Home Directory

So when we use ~ we should use the / Character for the directory separation or we should mention the absolute path instead of relative path.

Example for an Absolute path

/home/username/ed-grid/ed-grid

Heresiarch

Answer 14

In peek-solutions2.scss, remove the previous code and add this:

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

Dissimilation

Answer 15

According to this github issue:

Dart Sass's command-line interface doesn't look for imports in any location that's not explicitly provided as a --load-path on the command line. Node Sass's CLI may behave differently.

Thus to get the a similar behaviour with node-sass use --load-path.

sass --load-path=./ src/scss/styles.scss dist/css/styles.css

This command will load the current dir and will resolve ./node_modules or a possible ./src.

Horror

Answer 16

Check where Bootstrap is in node_modules and add

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

for it.

Bobbybobbye

Answer 17

Try @import "~bootstrap/scss/bootstrap.scss";, no forward slash after the tilde.

Offload

Sure, this tip works for rollup postcss plugin. But it deprecated for webpack sass-loader. – Midis

Answer 18

I fixed this issue with updating sass version from 1.26.10 to 1.32.13.

Kidder

Answer 19

It can be routing issues, if you are on rails use this @import "../../../node_modules/bootstrap/scss/bootstrap"; @import '../../../node_modules/bootstrap-icons/font/bootstrap-icons';

Tit

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Streetman

Answer 20

In my case, it was caused by the fact that my project was opened in a parent folder

 root                ⬅️ my vscode had this folder as a root 
    └── project     ⬅️ should have been in this folder instead
        ├── node_modules
        ├── src
        ├── static
        └── ...

Galway

Answer 21

In my case, I had a symlink to my C:\dev folder when the physical location was actually E:\dev. Changing directories from C:\dev\project to E:\dev\project and running the mix command fixed this for me

Ansilme

Answer 22

If you're using Aurelia, WebPack and SASS and you did an NPM install of bootstrap the import will be:

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

Maurine

Answer 23

I had the same problem and adding this code

resolve: {
    alias: [
        {
            // this is required for the SCSS modules
            find: /^~(.*)$/,
            replacement: '$1',
        },
    ],
},

in the defineConfig file So it worked

Aeschylus

Answer 24

I had the same error. I solved it. I just corrected the import in all dependent files:

@import 'variables' --->>>> corrected for --->>>> @import './variables'

Lawry

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Kwangtung

Answer 25

You simply need to cd into the root of your project folder. Two scenarios:

1. If you're deep inside the project, you need to run cd .. in the command line until you are in the root.

2. If you're outside of the project, you need to run cd [insert root folder here] and run your build again.

Grethel