sass @import doesn't work

[rumanHuq]

tried importing partials in a sass file. No luck. If i import .css inside .sass it works. This is the exact error: "Resource interpreted as Stylesheet but transferred with MIME type text/plain"

[albertkim]

I'm hitting this issue as well, and it's preventing an easy migration for an existing web application to an electron application. Is this a recent issue?

[anaisbetts]

SASS support is pretty basic / weird right now because node-sass is too problematic to use inside Electron, and sass.js also has Odd Issues

[anaisbetts]

I'll definitely take PRs to fix this though

[saschagehlich]

I looked into this and it seems that node-sass is not really an option for electron-compile since it's a native module and would have to be re-compiled for each and every platform that we're compiling / packaging for, right? It also seems that sass.js does not make use of the include_path option that libsass has, since it's targeting both server and client javascript (and emscripten does not have access to the file system when running in the browser).

So I guess the only option to solve this, would be to add a method to electron-compiler's sass.js support that resolves a custom includePaths option by creating an importer callback. I'll look into this tonight I guess :)

[saschagehlich]

@paulcbetts Created a PR over at https://github.com/electron/electron-compilers/pull/55

[siliconcow]

Is this now working? I see the PR is merged but when using electron-forge which includes the latest electron-compile @ 6.1.3

I'm trying to use ng-material and still can't seem to load a theme:

my .scss file has:
@import '~@angular/material/core/theming/all-theme';

and it fails to find the file:
Failed to compile C:/Users/David/projects/distractdefender/src/material2-app-theme.scss: Error: File to import not found or unreadable: ~@angular/material/core/theming/all-theme.
       Parent style sheet: stdin
        on line 1 of /stdin
>> @import '~@angular/material/core/theming/all-theme';
   ^

Error: Error: File to import not found or unreadable: ~@angular/material/core/theming/all-theme.
       Parent style sheet: stdin
        on line 1 of /stdin
>> @import '~@angular/material/core/theming/all-theme';
   ^

    at C:\Users\David\projects\distractdefender\node_modules\electron-compilers\lib\css\sass.js:101:17
    at Immediate._done (C:\Users\David\projects\distractdefender\node_modules\sass.js\dist\sass.sync.js:667:9)
    at runCallback (timers.js:651:20)
    at tryOnImmediate (timers.js:624:5)
    at processImmediate [as _immediateCallback] (timers.js:596:5)

[anaisbetts]

~@angular/material/core/theming/all-theme isn't a real path, can you find documentation where Sass supports this?

[JakeDluhy]

I am also still seeing this, but only on Windows.

Failed to compile C:/Users/dev/development/react-frontend/app/styles/main.scss: Error: File to import not found or unreadable: ../../../node_modules/grommet/scss/grommet-core/settings.defaults.
       Parent style sheet: /sass/C:\Users\dev\development\react-frontend\app\styles\vendor\grommet.scss
        on line 4 of sass/C:\Users\dev\development\react-frontend\app\styles\vendor\grommet.scss
>> @import "../../../node_modules/grommet/scss/grommet-core/settings.defaults";
   ^

Error: Error: File to import not found or unreadable: ../../../node_modules/grommet/scss/grommet-core/settings.defaults.
       Parent style sheet: /sass/C:\Users\dev\development\react-frontend\app\styles\vendor\grommet.scss
        on line 4 of sass/C:\Users\dev\development\react-frontend\app\styles\vendor\grommet.scss
>> @import "../../../node_modules/grommet/scss/grommet-core/settings.defaults";

In my index.html, I have a tag <link rel="stylesheet" type='text/sass' href="../../app/styles/main.scss">, and main.scss imports a file that imports ../../../node_modules... which is what fails. Is it something to do with an import importing something else?

I also am having problems running package on both Windows and OSX. Similar to this https://github.com/electron-userland/electron-forge/issues/182

[XEngine]

any progress on this ?

[JakeDluhy]

I'm currently getting around it my running node-sass to compile my sass and then referencing the css output.

[Hum4n01d]

I’m having this issue with Stylus as well

[malept]

It looks like the tilde paths are an extension? https://github.com/matthewdavidson/node-sass-tilde-importer

[ryanjhayden]

Change it to this.

This does depend on your path though. You just need to specify the actual path/file. @import 'node_modules/@angular/material/_theming.scss';

[aparod]

I realize this is an old issue, but I wanted to confirm that specifying the filesystem path worked for me, with the caveat that the import path is relative to the HTML file, not the SCSS file.

So, if your HTML file is index.html and your SCSS file is located at css/styles.scss, your import should look like: @import "node_modules/path/to/file.scss"; NOT @import "../node_modules/path/to/file.scss";.