[SOLVED] Sass Error Can't find stylesheet to import

Introduction

The Sass Error “Can’t find stylesheet to import” usually means that you are @import path is incorrect.

I was working on old Vue app and noticed this error when I tried to import bootstrap, it came up with this error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
9 │ @import "../node_modules/bootstrap/scss/bootstrap";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  resources\scss\app.scss 9:9  root stylesheet
    at processResult (D:\projects\project\node_modules\webpack\lib\NormalModule.js:751:19)
    at D:\projects\project\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\projects\project\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\projects\project\node_modules\sass-loader\dist\index.js:54:7
    at Function.call (D:\projects\project\node_modules\sass\sass.dart.js:99051:16)
    at render_closure1.call (D:\projects\project\node_modules\sass\sass.dart.js:84557:12)
    at _RootZone.runBinary (D:\projects\project\node_modules\sass\sass.dart.js:29579:18)
    at _FutureListener.handleError (D:\projects\project\node_modules\sass\sass.dart.js:28099:21)

I was pretty sure that the location was correct, but had to dig a bit deeper to find the cause.

This post I will outline the steps to take to fix this error.

We can fix this error by doing the following:

• Check the relative paths
• Check @import syntax
• Consider using load paths
• If you are using Angular, the tilde (~) is not required

Check your relative paths

Commonly, the @import is not working is because the relative path provided did not resolve.

• / - This means the root directory
• ../ - This means going up on directory
• ./ - This means the current directory
• ../../ - This means going up two directories

Relative paths depend on the location of the SCSS file. In SASS, this means that @import will be base on your relative SCSS file.

Lets consider the following project structure. We have a basic app using SASS with Bootstrap.

.
└── my-app/
    ├── node_modules/
    │   └── bootstrap/
    │       ├── scss/
    │       │   ├── bootstrap.scss
    │       │   └── ...
    │       ├── js/
    │       │   └── ...
    │       └── dist
    ├── styles/
    │   ├── mixins/
    │   │   └── _backgrounds.scss
    │   ├── index.scss
    │   ├── _base.scss
    │   └── ...
    ├── package.json
    └── _common.scss

Now in our index.scss file when we try to @import the base bootstrap SCSS with the line:

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

We will be greeted by the error:

• Error: Can’t find stylesheet to import.

This is because our index.scss file lives in the /styles directory. If we use:

` “../node_modules/bootstrap/scss/bootstrap”

It means that we are only going up one level - in this case the the /styles folder. So to fix this, we need to go up 2 levels, so we have to modify the code to be:

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

This will tell SASS to go up to the root /my-app directory and go to the /node_modules folder.

Consider using load paths

All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports.

So for example, in my case instead of writing this every time we want to import bootstrap

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

Using load path, you don’t have to write that long path every time and can be shorted like so:

@import "bootstrap";

@imports will always be resolved relative to the current file first and then if there is no match, then it will use the load paths.

This ensures that you can’t accidentally mess up your relative imports when you add a new library.

So to do this, we just need the --load-path option:

sass --load-path=node_modules/bootstrap/scss src/styles/main.scss output.css

Check @import syntax

Sometimes it could be a basic thing that we have missed to cause this error. A few things to keep in mind:

• SASS takes Url format, so you will need to use forward slashes “/” instead of file path format eg “c:\path\to\file.scss”
• Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
• As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

Check that you have the dependencies installed

Now this might sound obvious, but make sure that the file actually exists in the first place.

So for example with bootstrap, I just made sure that it has been installed like so:

npm install bootstrap.

In some cases, NPM install can stuff up so you might need to clear /node_modules, remove npm cache, delete package-lock.json and install again.

1. Run npm cache clear --force to clear the NPM cache.

2. We need to delete the /node_modules with the following command (you might need to use sudo before each command):

rm -rf node_modules

3. Delete package-lock.json file using the rm command:

rm -rf package-lock.json

4. Install the dependencies using the following command:

npm install

Note for Angular: the tilde character (~) is not required

One other way that this error comes up is by using the tilde (~) character in your imports. I had a Angular application and was doing the below to import my mixins:

@import "~src/vendor/libs/ng2-nouislider/mixins";

Usually the tilde (~) character tells the compiler to search within that directory. However, I got this error when I went to build SASS:

./src/assets/vendor/default/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can’t find stylesheet to import. ╷ 4 │ @import “~src/vendor/libs/ng2-nouislider/mixins”;

As of Angular 13, the tilde (~) is deprecated. To fix this we can either do the following:

• use node_modules instead of ~ tilde symbol as shown @import node_modules/..../mixins
• add node_modules to angular.json file as below:

"stylePreprocessorOptions": {
  "includePaths": [
    "src", "./node_modules"
  ]
}

Tip: Instead of using @import - consider using @use

SASS recommends to move away from the @import syntax and move forward with @use instead.

Summary

We can fix the SASS error of Can’t find stylesheet to import by:

• Verify that we got the relative path correct. Making sure that the file referenced is the relative path of the current SCSS file.
• checking that our @import syntax is right - using forward slashes instead of backslashes
• Make sure that we are not using the tilde (~) character
• Verify that the file exists and not corrupted. To do this we need to check our node_modules folder and may need to clear npm cache!