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:
mkdir sass_test && cd sass_test
npm init -y
npm install gulp gulp-sass sass bootstrap
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;
@use "bootstrap/scss/bootstrap";
body {
background-color: lightgreen;
}
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.
Not a solution to the problem, but I ended up switching to use Webpack instead of Gulp.