Node-sass is known to be a great tool for front-end engineers to organize CSS. However, as anyone who has used Node-Sass knows, both love and hate node-Sass. You love it because it enables CSS engineering; You hate it because sometimes you can’t figure out why it went wrong again. I recently stepped into two new Node-sass traps in production, which made me decide to give up node-Sass.

What is Node-sass?

Although Node-Sass is a familiar friend, it’s worth introducing.

Node-sass is a library that provides binding for Node.js to LibSass, the C++ version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

Node-sass is a Bridge provided in a nodejs environment that provides the ability to call LibSass (which is a C++ implemented style preprocessor).

Ps: as you can see, node-sass is not implemented entirely in javascript, but with the power of C++, after all, compiled languages are fast.

Round1: Install Node-sass

If you’re new to the front end, you’ve probably asked the question: Why did my Node-Sass installation fail?

One of the answers you’ll find is using CNPM, but IT felt weird when I used it, first when I used Angular4, there were a lot of errors when I executed ng eject.

After all, we have been using NPM taobao mirror source Settings to deal with this problem. At the same time, this is also a technique to solve the problem of NPM install download delay or failure. After all, some packages are blocked.

npm config set registry https://registry.npm.taobao.org
Copy the code

But solving this problem is not the end of the story…

Round2: Node-sass and Node versions are incompatible

In general, once a NodeJS environment is installed on a PC, you don’t want to upgrade it for a long time.

But when I looked at Vite a while back, MY NodeJS version didn’t fit the bill anymore.

Compatibility Note

Vite requires Node.js version >=12.0.0.

So I upgraded the NodeJS version.

However, when I ran some old projects, I found that the project reported an error.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.13.0
Copy the code

At first glance, the error message says that NodeSass does not support the current runtime environment, which I guess must be a mismatch with the NodeJS version. I first checked my NodeJS version.

Nove -v v14.16.0Copy the code

Well, it’s the new version.

[email protected] does not support node@14.

In fact, I can solve the problem by lowering the NodeJS version to 13.

But I think there’s something wrong with that. The new project requires a higher version of NodeJS, while the old project requires a lower version of NodeJS. I only have one set of Node environment locally, so there is a contradiction. It seems that the development environment needs to be containerized.

NVM also manages node versions.

While this isn’t exactly node-Sass’s problem, who’s to say it doesn’t support node@14? It still sucks!

Round3: node-sass: Command failed

This was a problem I had running CI/CD in production last month.

error /builds/coollu-r-d/coollu-fe/xkgj_web/node_modules/node-sass: Command failed.
Copy the code

Followed by a bunch of error messages.

Even though I’m running a build in a Docker container, which means I don’t have the incompatibility problem with the Node version above, I still get errors over and over again. Who can handle that?

Use the Dart Sass

Dart Sass is a tool promoted on the Sass website. It includes command line tools based on the Dart VM and a pure Javascript implementation based on Node. Dart VM is Dart VM, the programming language of choice for Flutter. The latter is designed to quickly integrate with existing workflows in the Node environment, such as Webpack, gulp, etc. Dart Sass command line tools are better than Javascript Libraries, but to quickly connect to tools like WebPack, We currently use sass’S Javascript Library directly via NPM install –save-dev sass.

With Dart Sass, there were no problems installing or compatible with older Versions of Nodes, and the overall experience was great.

Dart Sass is our common name for it. It was originally released on NPM as DarT-Sass, but it has since been renamed Sass.

What should I do after switching to Dart Sass

As is well known in Vue projects, scoped styles are isolated by a hash property selector (such as [data-V-67c6b990]). If style penetration is desired, the /deep/ depth selector is used in Vue@2.

Note that /deep/ itself was a CSS proposal that was later deprecated and Vue /deep/ is not the same concept as CSS /deep/! Since it is easy for users to mistake Vue’s /deep/ and CSS’s deprecated /deep/ proposals for being the same thing, thus mistook /deep/ as an unusable feature, Vue also made adjustments to this feature with the RFC, resulting in :: V-deep.

Dart Sass does not support /deep/ and requires ::v-deep (selector :deep).

:deep(.foo) {
  position: relative;
}
Copy the code

Welcome to communicate

What other Node-sass issues have you encountered? Might as well leave a message to communicate!

If you think this article is good, please like it and follow it. Thank you for your support. Welcome to communicate with me directly. My name is Tusi. I look forward to making progress together with you!