csssass

Sass "Error: Can't find stylesheet to import."


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?


Solution

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