Issues compiling scss


#1

I am setting up laravel development.

Laravel’s own tool (laravel-mix) seems to be working fine - node run dev and node run watch work.

I have succeeded in getting atom to trigger recompile when i change an scss file in my laravel5.6 project.

But the compile in atom is failing:

Command failed: node-sass --output-style compressed undefined/./css/sass//main.scss undefined/./css//main.css
/bin/sh: 1: node-sass: not found

How do I trace to see who is actually complaining? What config have I neglected that makes this happen?


#2

Atom has no ability to compile code. Therefore, you have to be using a package to attempt this. What package are you using?


#3

Good question - one I allude to in my post:

How do I trace to see who is actually complaining? What config have I neglected that makes this happen?

The error is appearing in a standard atom popup with no helpful info as to who threw it.


#4

And yet you have all of the information about what packages you have installed on your machine and you have the ability to narrow it down by disabling packages until the popup goes away.


#5

Do you use my package sass-autocompile?


#6

Thanks for the interest - I do currently have sass-autocompile installed.

I believe I have a configuration issue, not an atom core or sass-autocompile problem. Is there a better place for this conversation or better labeling/tagging to make the issue report less annoying?

And it is almost working for me :slight_smile: When I have the time I think I will be able to make progress.

Following is my current state but please don’t waste your time on it until I get a better understanding of who configures what WRT this process! I do support and understand that resources are limited.

However - if a quick read tells you something obvious that I have missed, please do let me know :smiley:

My testing on this issue has not been disciplined enough to provide really useful feedback. I do not believe that sass-autocompile is causing my problem - I think it is some lower level configuration of the compile process because Laravel’s own compile of sass from the commandline works fine but sass-autocompile is having problems finding ~bootstrap/scss/bootstrap. I do not want to move this file as that makes my plain vanilla laravel deployment not plain any longer. I also would rather not modivy the scss include(s) if I do not have to.


#7

Well, your problem is, that node-sass is not installed, as mentioned in the error message :wink: Have a closer look at the package manual. Here the important abstract which will fix your problem:

At the moment, you can only use this package when you install node.js and node-sass on you system. It’s important that you install node-sass globally (command: npm install node-sass -g), so it’s possible to access it via CLI.

The reason why sass-autocompile needs that is because node-sass is not compatible with atom shell in the current version (2.0.1), so it cannot be added as dependency. Probably that will change later, so you won’t have to install node.js and node-sass additionally ‒ I put it to the roadmap.

After installing node.js and running the mentioned command, my package should do the job.

Beside that, read the Usage section! There are many hints for using my package/node-sass!


#8

To be sure it was as specified, I followed the directions in your reply exactly, after fixing a known difficulty regarding certain global installs ( ref here )

Here is what npm reports. the cwd is where my project resides. the bit in {} is the truncated git branch. I believe this shows that node-sass is indeed installed:

    [10:32]{initial_pa} /opt/wrwebInvoice |--> npm -g list --depth=0
    /home/bos/npm-global/lib
    └── node-sass@4.8.3

    [10:33]{initial_pa} /opt/wrwebInvoice |--> 

The (unchanged) error message in atom:

{
  "status": 1,
  "file": "/opt/wrwebInvoice/resources/assets/sass/app.scss",
  "line": 9,
  "column": 1,
  "message": "File to import not found or unreadable: ~bootstrap/scss/bootstrap.",
  "formatted": "Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.\n        on line 9 of ../../opt/wrwebInvoice/resources/assets/sass/app.scss\n>> @import '~bootstrap/scss/bootstrap';\n\n   ^\n"
}

As this shows, the native laravel compile (no idea yet how it is configured) has no problem building the asset:

[10:33]{initial_pa} /opt/wrwebInvoice |--> npm run dev
> @ dev /opt/wrwebInvoice
> npm run development
> @ development /opt/wrwebInvoice
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
 10% building modules 0/1 modules 1 active ...nvoice/resources/assets/sa 10% building modules 1/2 modules 1 active ...nvoice/resour...
<<< omitted verbiage re compile >>>
...nvoice/resources/assets/ 95% emitting                               
 DONE  Compiled successfully in 7423ms                          10:47:55
       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.37 MB       0  [emitted]  [big]  /js/app
/css/app.css   187 kB    0, 0  [emitted]         /js/app, /js/app
[10:47]{initial_pa} /opt/wrwebInvoice |--> 

I think it is a webpack thing - I need to spend some time understanding the config and then I think I will be able to post a solution.


#9

The problem here is, that node-sass (not my package) cannot find the bootstrap SCSS files. I think you have a build process in use?! Analyse this and set the correct path if you want to compile your SCSS files via Atom and my package.