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:
- Create a new directory:
mkdir sass_test && cd sass_test - Initialize NPM:
npm init -y - Install dependencies:
npm install gulp gulp-sass sass bootstrap - 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;
- Create test.scss:
@use "bootstrap/scss/bootstrap";
body {
background-color: lightgreen;
}
- 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:
- Verified file existence: I've confirmed that node_modules/bootstrap/scss/bootstrap.scss exists.
- Corrected import paths: I've tried various import paths, including relative paths (../node_modules/...) and direct module paths (bootstrap/scss/...).
- Explicit includePaths: I've added includePaths: [path.resolve(__dirname, 'node_modules')] to my gulp-sass options.
- Cleared npm cache and reinstalled dependencies: I've deleted node_modules and package-lock.json and reinstalled all packages.
- Checked node_modules structure: The node_modules folder appears to be correctly structured.
- Reinstalled gulp-sass and sass: I've reinstalled these packages. Verified Node.js and npm versions: I'm using current versions.
- Checked for conflicting global installations: I've checked for and uninstalled global sass installations.
Environment:
- Operating System: Windows 11
- Node.js version: 23.7.0
- npm version: 11.1.0
- gulp version: ^5.0.0
- gulp-sass version: ^6.0.0
- sass version: ^1.85.1
- bootstrap version: ^5.3.3
Additional Details:
- I have verified that the node_modules/bootstrap/scss/bootstrap.scss file does exist.
- I have created the test project in a completely separate folder from my main project.
- I'm at a loss as to what could be causing this. Any help would be greatly appreciated.
Edit: Confirmed this happens on Ubuntu as well.