node.jssassgulpbootstrap-5gulp-sass

Sass @use 'bootstrap/scss/bootstrap' failing with 'Can't find stylesheet to import' in minimal project


I'm encountering a persistent issue where Sass is unable to resolve the import path for Bootstrap, even in a minimal test project. I'm using gulp-sass with Dart Sass.

Here's the problem:

I'm trying to import Bootstrap's main Sass file (bootstrap.scss) using @use "bootstrap/scss/bootstrap"; in my test.scss file. However, Sass keeps throwing the error:

Error in plugin "sass"
Message:
    test.scss
Can't find stylesheet to import.
  ╷
1 │ @use "bootstrap/scss/bootstrap";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  - 1:1  root stylesheet

Steps to Reproduce:

  1. Create a new directory: mkdir sass_test && cd sass_test
  2. Initialize NPM: npm init -y
  3. Install dependencies: npm install gulp gulp-sass sass bootstrap
  4. Create gulpfile.js:
    const sass = require('gulp-sass')(require('sass'));
    
    function css() {
        return gulp.src('test.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest('dist'));
    }
    
    exports.css = css;
    exports.default = css;
  1. Create test.scss:
    @use "bootstrap/scss/bootstrap";

body {
    background-color: lightgreen;
}
  1. Run gulp: gulp

Expected Result: The Sass compilation should succeed, and a dist/test.css file should be created.

Actual Result: I get the "Can't find stylesheet to import" error.

What I've Tried:

Environment:

Additional Details:

Edit: Confirmed this happens on Ubuntu as well.


Solution

  • Not a solution to the problem, but I ended up switching to use Webpack instead of Gulp.