关于sass:vuecli-3中dartsass替换nodesass

16次阅读

共计 804 个字符,预计需要花费 3 分钟才能阅读完成。

如果你应用过 sass,应该理解多年来 node-sass 始终是 JavaScript 社区里的支流抉择,它实际上只是 libsass 在 node 环境下的一个 wrapper,编译 sass 文件的理论工作是 libsass 实现的。

在应用 node-sass 过程中遇到的很多问题实际上也是 libsass 引发的,libsass 是用 C/C++ 实现的,常见的问题是,在装置 node-sass 的过程中常常会呈现装置失败的状况,又或者切换了 Node.js 版本发现 node-sass 须要重新安装能力用,如果你在 docker 中装置 node-sass 还会遇到因为短少各种依赖导致 node-sass build 失败的状况,又或者在国内因为网络起因导致 node-sass 须要的二进制文件下载不下来而 build 失败。

当初,sass 官网曾经应用 dart-sass 作为 sass 的次要实现:

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

替换过程:

  1. 首先把 package.json 中的 node-sass 删除掉,执行:

    
    ```language
    npm i sass sass-loader -D 
    ```
    
  2. 在 vue.config.js 中批改 sass-loader 的配置:
module.exports = {
  css: {
    loaderOptions: {
      sass: {implementation: require('sass'), // This line must in sass option
      },
    },
  }
//other code

}; 

实现!

正文完
 0