使用dart-sass替换node-sass
0 点赞
0 条评论
821 次浏览
发布于 7 个月前
如果你使用过 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的各种安装失败问题了。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
2065 浏览 · 0 评论
浏览器后退跳转到指定的页面
2037 浏览 · 0 评论
Flutter适配夜间模式
1524 浏览 · 0 评论
JavaScript实现继承的几种方法
1249 浏览 · 0 评论
【面试题】创建长度为100的数组
1172 浏览 · 0 评论
使用dart-sass替换node-sass
821 浏览 · 0 评论
最新文章
centos7中编译安装nginx
86 浏览 · 0 评论
JavaScript计算两个颜色之间的渐变色值
111 浏览 · 0 评论
vue router提供了addRoutes,却没有提供removeRoutes的解决方案
104 浏览 · 0 评论
基于Axios的封装和请求接口的管理
196 浏览 · 0 评论
使用verdaccio搭建私有npm仓库
223 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
513 浏览 · 0 评论