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