Vue安装sass

发表于 | 分类于
Vue安装sass

sass

node-sass

1
2
3
4
5
npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev

// 如果项目中已经装了vue-style-loader,则不用安装
npm install style-loader

安装指定版本：
由于2020以后下载的sass版本过高会导致报错，所以下载指定的7.x.x版本

1
npm install sass-loader@7.3.1 --save-dev

卸载

1
2
npm uninstall sass-loader
npm uninstall node-sass

使用

1
2
3
<style lang="scss" scoped>
  @import 'static/scss/common.scss' 
</style>

如果安装失败可以通过淘宝的cnpm镜像安装node-sass，解决以上问题。

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass  --save

dart-sass

安装sass-loader

1
npm install sass-loader --save-dev

安装dart-sass

1
npm install sass --save-dev

注意：你也可以选择安装node-sass，来替换dart-sass,但非常不建议！

  1. dart-sass 和 node-sass都是用来将sass编译成css的工具。但node-sass 与 Node.js 版本相关联，这就导致，一旦本地 Node.js 升级，就会出现 node-sass 无法工作的情况
  2. 2020年10月27日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。
  3. npm 上的 dart-sass 包已被弃用，直接更名为 sass
  4. dart-sass不支持/deep/，要改成::v-deep