Pre-processors import (Sass/Less) not working

walleXD commented 7 years ago

[X] I have read the contribution documentation for this project.
[X] I agree to follow the code of conduct that this project follows, as appropriate.
[X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue: I am using the react template and as the major issue that I am facing is in regard to pre-processors. In the electron compile doc it shows to just include the sass files in the index.html file and electron compile would compile it. But that's not working for me and I am not exactly sure what the issue is either as I am not getting any errors from electron-compile. My guess would be electron compile isn't doing anything with the link tag where I am linking the sass file. So, how do I move forward and fix it?

"forge": {
            "make_targets": {
                "win32": [
                    "squirrel"
                ],
                "darwin": [
                    "zip"
                ],
                "linux": [
                    "deb",
                    "rpm"
                ]
            },
            "electronPackagerConfig": {},
            "electronWinstallerConfig": {
                "name": "zapp"
            },
            "electronInstallerDebian": {},
            "electronInstallerRedhat": {},
            "github_repository": {
                "owner": "",
                "name": ""
            },
            "windowsStoreConfig": {
                "packageName": "",
                "name": "zapp"
            }
        }

MarshallOfSound commented 7 years ago

Can you post a minimal sample application demonstrating your issue.

walleXD commented 7 years ago

@MarshallOfSound

index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="styles/App.sass">
</head>

<body>
<div id="App"></div>
</body>

<script type="text/jsx">
import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';

const render = () => {
  const App = require('./app').default;
  ReactDOM.render(
    <AppContainer>
      <App/>
    </AppContainer>,
    document.getElementById('App')
  )
}

render();
if (module.hot) {
  module.hot.accept(render);
}
</script>
</html>

App.sass (just for test)
```
h1
color: blue
```
When electron loads up, it still loads the original sass file, not the compiled file
```
<link rel="stylesheet" type="text/css" href="styles/App.sass">
```

So, it seems that electron compile isn't compiling the sass file and so when the app loads I am getting the sass which electron can't process

MarshallOfSound commented 7 years ago

@walleXD I'll test this out in a bit but can you quickly try without the type="text/css", might be tricking the compiler

walleXD commented 7 years ago

@MarshallOfSound you are absolutely right.

I was using this as a reference from slack engineer's presentation on electron-compile and he used text/css for the stylesheet type.

Thanks a lot

walleXD commented 7 years ago

@MarshallOfSound Do sass imports work out of the box? I am trying to import react-md library into my app.sass:

@import "~react-md/src/scss/react-md"

$md-primary-color: $md-light-blue-500
$md-secondary-color: $md-red-a-200

@include react-md-everything

but I get the following error:

Failed to compile /Users/wahmed/Projects/zapp/src/styles/app.sass: Error: File to import not found or unreadable: ~react-md/src/scss/react-md.
       Parent style sheet: stdin
        on line 6 of /stdin
>> @import "~react-md/src/scss/react-md";
   ^

Error: Error: File to import not found or unreadable: ~react-md/src/scss/react-md.
       Parent style sheet: stdin
        on line 6 of /stdin
>> @import "~react-md/src/scss/react-md";
   ^

    at /Users/wahmed/Projects/zapp/node_modules/electron-compilers/lib/css/sass.js:101:17
    at Immediate._done (/Users/wahmed/Projects/zapp/node_modules/sass.js/dist/sass.sync.js:668:9)
    at runCallback (timers.js:651:20)
    at tryOnImmediate (timers.js:624:5)
    at processImmediate [as _immediateCallback] (timers.js:596:5)

Any idea why this is happening? I found this thread about sass imports. I tried import a sass file from the same directory and it seems to work:

@import "_test"

*_test.sass

h1
  color: blue

Any idea?

Thanks again

MarshallOfSound commented 7 years ago

For import issues in sass I recommend following https://github.com/electron/electron-compile/issues/162

If you want to use a CSS preprocessor flawlessly in forge I recommend using less over sass, the syntax is virtually identical but less is much easier to support (and there works nicely)

anaisbetts commented 7 years ago

Tilde syntax probably doesn't work, you probably need to write a relative path, Sass is really hard to support because of the underlying libraries being Not Well Suited For Node. We're certainly willing to take any PRs to improve it, but LESS is much much easier to get working correctly

andeersg commented 7 years ago

I figured out here: https://github.com/electron-userland/electron-forge/issues/245 That SCSS only worked in Electron-Forge when importing files that did not start with underscore.

It gave me little errors, but when you try to open the SCSS-file in the debugger it may contain an error message there.

Comandermuffif commented 7 years ago

I have come across a similar issue while trying to use Angular Material. Importing with a relative path does not resolve. @import "../node_modules/@angular/material/_theming"; while using a full path does resolve. @import "C:/Users/comandermuffif/Repositories/test/node_modules/@angular/material/_theming";

This is due to the file structure of the project. The main.ts that Electron runs is in a folder that is sibling to the node_modules folder.

./node_modules/* ./src/main.ts ./src/index.html ./src/index.ts ./src/custom-theme.scss

Any attempt to import from node_modules in custom-theme.scss results in Error: File to import not found or unreadable:.

Just for clarity, the package.json contains

"main": "src/main.ts",

This was replicated with Electron-Forge 3.0.5

EDIT: Using the following does work with the above folder structure. @import "node_modules/@angular/material/_theming";

MarshallOfSound commented 5 years ago

@mirukusheki Please do not spam issues across github with a comment that provides no benefit to anyone involved. PRs are always welcome to all electron and electron-userland projects and the folks maintain them do so for free under no obligation for anyone.

malept commented 5 years ago

Closing, see https://github.com/electron-userland/electron-forge-templates/issues/66

electron-userland / electron-forge-templates

Pre-processors import (Sass/Less) not working #39