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 electron-userland/electron-compilers#55

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 electron/forge#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';