Sass "Error: Can't Find Stylesheet to Import."

Sass Error: Can't find stylesheet to import.

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

Sass error: Can't find stylesheet to import when importing bootstrap

@import "../../node_modules/bootstrap/scss/bootstrap";

wrong path, that was the problem :)

SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;

As usual with Google APIs, there is confusion between Angular Material version 11 and version 12.

[Short answer]

In SCSS, they seem to have deprecated use of @import favouring @use syntax. It seems Angular Material implemented this change somewhere around v11->12

(am also a newbie. This is my best guess).

Watch this YouTube video to get a general idea of the difference.

There is a reason why Google Angular is the most dreaded framework of 2020 on Stack Overflow :)
So it depends on the Angular Material version you are using

[Long answer]

In Angular Material v11, they seem to use @import syntax, and in v12 they seem to favour @use syntax.

Therefore, you seem to be trying to use a tutorial or theme designed with Angular Material v11 in mind which uses @import syntax and you mix it with @use syntax of Angular Material v12. The biggest difference between the two is that @use syntax causes the SCSS to be prefixed, so the function names change slightly, for example

//angular material v11 which uses @import syntax 
@import '~@angular/material/theming';//notice that the file imported is also different
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo); //notice that functions not Namespaced

$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

While the same example using angular material v12 which uses @use syntax

@use '~@angular/material' as mat; 

$candy-app-primary: mat.define-palette(mat.$indigo-palette, 500); //notice that functions are prefixed with Namespace mat. This is a feature of the scss @use  directive
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

[I have yet to find a way to find the correct function names across the 2 versions. It is not trivial to migrate a theme manually especially when you are a newbie]

So you can see, its easy to have a missing stylesheet depending on if you are using Material v11 or 12. Good luck

Next Js does not deploy for SaSS. SassError: Can't find stylesheet to import

Using a lowercase instead of an uppercase might be responsible for your error.

It should be @import "./pages/HaveProject.module.scss" instead of @import "./pages/Haveproject.module.scss"

We have all been there, typos can be very frustrating.

---

Related Topics