使用dart-sass替换node-sass
0 点赞
0 条评论
5191 次浏览
发布于 2021-10-31 22:13
如果你使用过 sass ,应该了解多年来 node-sass 一直是 JavaScript 社区里的主流选择,它实际上只是 libsass 在 node 环境下的一个 wrapper, 编译 sass 文件的实际工作是 libsass 完成的。
在使用 node-sass 过程中我们经常会遇到很多问题,不同平台上有各种各样的问题,python版本的问题,node-gyp的问题,node.js的版本问题等等,甚至因为国内网络的问题等等,导致不管是部署还是多人开发都遇到了多多少少的问题,所以官方现在推荐用dart-sass来作为编译器。
现在,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:
// 使用别名代替
npm install node-sass@npm:dart-sass -D
替换方案2:
npm uninstall node-sass -D
npm i sass sass-loader -D
然后在webpack配置
{
test: /\.(sa|sc)ss$/,
loader: 'sass-loader',
options: {
// 使用dart-sass代替node-sass
implementation: require('sass'),
},
};
注意,如果使用vue开发的话需要用::v-deep代替/deep/和>>>来进行样式穿透,否则会报错。
/* 之前的写法 */
.container {
/deep/ {
a {
color: red;
}
}
>>> {
.b {
color: blue;
}
}
}
/* 需要修改为 */
.container {
::v-deep {
a {
color: red;
}
}
::v-deep {
.b {
color: blue;
}
}
}
这样就不会遇到安装node-sass的各种安装失败问题了。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
使用dart-sass替换node-sass
5191 浏览 · 0 评论
浏览器后退跳转到指定的页面
3866 浏览 · 0 评论
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
3860 浏览 · 0 评论
Flutter适配夜间模式
3611 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
3570 浏览 · 0 评论
最新文章
js通过扫码枪快速录入的实现
406 浏览 · 0 评论
使用 WebSocket 实现你画我猜实时绘图
745 浏览 · 0 评论
基于code-server部署自己的云端vscode
2871 浏览 · 0 评论
支付宝动态收款码生成自定义金额及备注
2863 浏览 · 0 评论
使用 nohup 命令将程序挂载在后台执行
1959 浏览 · 0 评论
基于OpenLayers实现离线地图
2802 浏览 · 0 评论