wxa.js 默认使用的样式语言是 scss,所以其默认创建的项目就会要求安装 node-sass,但由于 node-sass 依赖了 binding.node 等包,导致常常会出现 node-sass 安装失败的问题。
如果你并没有在项目中使用 scss ,则可以考虑将你项目种的 node-sass 移除,从而缩小项目的依赖体积,提升项目安装成功的概率。
由于 wxa 默认使用了 scss,因此,我们需要移除项目中针对 scss 的配置,并移除代码中的 scss ,这样才能保证后续在编译的过程中,不会调用 node-sass 的依赖。
在 wxa 的默认配置中,配置了 sass/scss 的依赖,我们如果不移除这个依赖,就会导致后续在构建的时候,自动安装相关依赖。
因此,我们需要在 wxa.config.js
中添加 use
相关配置,且仅保留 babel 作为依赖,具体修改如下:
module.exports = {
plugins: [
new ReplacePlugin({
list: envlist,
}),
],
// 你的其他配置
use: [
{
test: /\.js$/,
name: 'babel',
},
],
// 你的其他配置
};
在移除了 wxa.js 的构建依赖后,接下来需要移除代码中关于 scss 的标示,从而使我们的代码可以被正确的渲染工具所渲染。具体修改如下所示,右侧为修改后的结果
当我们完成了上述的操作之后,就可以放心的移除系统中关于 sass 的依赖了,从而减少整个项目的体积和对 node-sass 的依赖。
你只需要执行如下的命令,就可以移除项目中关于 sass 的依赖了。
npm uninstall @wxa/compiler-sass
// 或者
yarn remove @wxa/compiler-sass
scss是一个好的语言,但 node-sass 却不是一个好的工具,如果你不使用它,不妨将其移除,提升你的项目构建速度。
我们在网页中经常需要控制一些元素的隐藏、透明等属性 style .d1{ display: none...
在使用dreamweaver或者frontpage来制作HTML网页时,我们有可能会遇到这样的问题...
作者:小傅哥 博客: https://bugstack.cn 沉淀、分享、成长,让自己和他人都能...
1.我向你夸下海口,心为你滴成琥珀,冷却以后,千万年后爱通透依旧。 2.一朝春...
前言 何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能...
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。 相框需要自己配置,...
突然想到的方法,来试试吧 1.页面布局 canvas id=canva width=500px height=300p...
Gird布局与Flex布局有一定的相似性,都是对容器的内部项目进行划分。 Flex布局是...
序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {...
需求催动此篇博客的诞生 项目背景 之前也没写过小程序但是看过之后都是现成的api...