Problem to install node-sass HTTP error 404 Not Found

shahryarjb

Hello, I want to install phoenix in alpine linux, but when I want to install package.json phoenix 1.5.10 it shows me this error

#16 17.79 > node-sass@4.14.1 install /app/apps/mishka_html/assets/node_modules/node-sass
#16 17.79 > node scripts/install.js
#16 17.79
#16 18.17 Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux_musl-x64-93_binding.node
#16 19.66 Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/linux_musl-x64-93_binding.node":
#16 19.66
#16 19.66 HTTP error 404 Not Found

I searched and I found this page Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-79_binding.node" · Issue #2773 · sass/node-sass · GitHub and it didn’t fix my problem. then I update "node-sass": "^4.13.1", to --> 6.0.1, then npm let me finish my installation but I have not-compatible error in my phoenix when I start iex -S mix phx.server

I think I should update "sass-loader" and some dependencies

Thanks please help me to update my package.json

node lts
npm@6.14.14
phoenix 1.5.10
elixir 1.12.0
with docker

4 comments

/phoenix #troubleshooting #node

0 5077 4

2021-08-20 14:27:23 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

tomkonidas

Dart Sass is the proper replacement for node-sass.

As stated in Node Sass

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

You should be able to just replace node-sass with the new dart sass and not have any problems. (From memory I don’t remember having to update any other lib)

Post #1

shahryarjb

can you give me your example package.json to see what version of (sass-loader , sass) do you use?

Post #2

tomkonidas

This is from a project with Tailwind + AlpineJS

{
  "repository": {},
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "topbar": "^0.1.4",
    "alpinejs": "^2.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@tailwindcss/forms": "0.3.3",
    "@tailwindcss/jit": "0.1.18",
    "@tailwindcss/typography": "0.4.1",
    "autoprefixer": "10.3.1",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "8.3.5",
    "postcss-loader": "4.3.0",
    "sass": "1.35.2",
    "sass-loader": "^8.0.2",
    "tailwindcss": "2.2.4",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

Post #3