64

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?

25 Answers 25

60

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

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

in your scss file

3
  • 9
    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? Feb 28, 2020 at 0:57
  • 7
    This doesn't work.
    – flm
    Mar 11, 2022 at 9:14
  • 3
    This can work if you are running sass from the parent folder. Adding some explanation of this would benefit this answer. Nov 22, 2022 at 17:52
19

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.

1
  • 1
    Or ng serve elsewhere other than the root (just outside src) Apr 30, 2021 at 17:07
17

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

@import 'style/components/palette'; 

to

@import 'style/components/_palette.scss';
3
  • 5
    Thanks for sharing. I had this problem when using NX. This answer works. But why does this solve the issue?
    – Pieterjan
    Oct 15, 2021 at 16:39
  • 1
    same. works for me. Mar 22 at 7:03
  • work for me too. I think its because it is root directory for app entrypoint Mar 31 at 14:57
14

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

4
  • 15
    Do You know why it works? I can't find answer for this.
    – instead
    Feb 27, 2021 at 23:55
  • 4
    same, what is this sorcery?
    – discape
    Sep 10, 2022 at 12:06
  • 5
    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.
    – Bryce
    Nov 16, 2022 at 17:01
  • 1
    I don't get an error, but unfortunately the import didn't happen. Failed to import style files May 1 at 0:02
9

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.

2
  • I was launching the task by NPM script instead of the GRUNT one
    – antzio
    Jun 23, 2022 at 9:43
  • 2
    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 :)
    – ghiscoding
    Feb 26 at 17:50
5

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...
5

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.

5

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";
5

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

0
3

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.

3

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

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

2

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

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

2

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.

0
2

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

1

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';
0

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

0

Check where Bootstrap is in node_modules and add

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

for it.

0

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

0

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';

1
0

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
        └── ...
0

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

0

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";

0

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

0

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

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

1
  • 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.
    – Community Bot
    Mar 15 at 10:58
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.