Phoenix won't compile due to node-sass on Win10

Phoenix Forum Questions / Help
1

Hello!

I’ve been trying to get Phoenix to compile for a week now, and my sanity is slipping through my fingers. Any suggestions on getting this to compile? I’ve been able to run Phoenix on this machine previously a few years back.

mix phx.new test

Elixir 1.9.1
OTP 21
Phoenix 1.5.1
Node 12.17.0
NPM 6.14.5

I’ve tried:

npm install
npm install node-sass
npm uninstall node-sass
npm rebuild
npm rebuild node-sass

Deleting node_modules

Installing brunch

mix phx.new --no-brunch

Clearing NPM cache

Creating new projects on different drives

Running with admin rights

CMD / PowerShell / GIT
2

Sounds like you’ve tried all the standard things that could be going wrong on Windows; can you post an example of the error you’re getting?

3

I think that’s the natural outcome of living with Win10. If it wasn’t for superior performance of Powerpoint & Excel on Windows (which I have to use periodically) I’d give up on it for good.

…anyway…

I have the latest Phoenix running under Win 10. Webpack seems to be more or less behaving but I do recall having to fight with something to get it up and running - let us know what errors you are getting and it might jog my memory. Unfortunately I did my initial commit after it was running so don’t have a record of the change.

4

In short, replace node-sass with sass (dart sass), dart sass doesn’t need to rebuild anything.

In details, replace "node-sass": "xx.xx.xx" with "sass": "^1.22.10" in package.json. Then, sass-loader will use sass (dart sass) automatically.

Give it a try.

6 Likes
5

phx_new 1.5.1 doesn’t provide --no-brunch option anymore. I am wondering why your output is showing brunch related things. That’s weird.

You need to check whether your phx_new is 1.5.1, too.

2 Likes
6

Changing the dependency to be sass worked! I am beyond happy, now I can develop my favorite webframework on my main machine. Thank you!

2 Likes
7

Hooray!

1 Like
8

This is not only Windows specific, I was getting the same error on a Mac running Mojave today and also resolved it by replacing node-sass with sass.

9

node-sass has always been a sore point. A few months ago I took the effort to rip them all off from my projects and rewrite my style sheets in PostCSS + tailwindCSS, which has more functionalities and less hassles. Couldn’t be happier.

10

Surprised no one fixed this already, I am also not able to build the assets with Phoenix 1.5.7 on a Mac.

11

There is a thread with solutions for Mac here:

1 Like
12

I’ve tried this, but unfortunately get this error:

ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss)     
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    Error: Cannot find module 'node-sass'

No idea how to solve it, and it seems to be a bottleneck - what would you recommend? Thanks so much.

13

Did you run npm install to install all packages?

1 Like
14

Thanks for the hint - unfortunately I’d tried that, and to no avail.

But, no worries - I found the solution:

What happened was that I’d tried the earlier hints in this thread to replace "node-sass" with "sass", in the package.json . In doing that, I simply pasted over the "node-sass": "xx.xx.xx" line with "sass": "^1.22.10" - however, the "node-sass": "xx.xx.xx" line was (originally) written immediately after the line for sass-loader. So now, "sass": "^1.22.10" comes after it - this seemed to be the problem.

When I experimented with putting the new "sass": "^1.22.10" before sass-loader, saved and npm installed, it seemed to work.

Does that seem to make sense (if not, maybe I’ve remembered wrongly about what I did to fix it)?

Thanks so much! Hope the info helps anyone to follow.