postcss-bem插件在webpack4以上版本报错处理 .moveTo is not a fu

wwolf 发布于2019-08-29 17:24 / 3139人阅读

摘要：强大的插件让我们在编写的过程中获得了极大的便利，比如，我们可以方便的使用语法来命名我们的组件。但是在以上的版本中，却会导致编译报错这是由于源字符串解析成的抽象语法树已经废弃了该方法参考一场由引发的血案。

postcss强大的插件让我们在编写css的过程中获得了极大的便利，比如，我们可以方便的使用BEM语法来命名我们的组件。


    我是Title
    我是内容

 @component CompName {
    height: 200px;
    width: 200px;
    margin: auto;

    @descendent contain {
        font-size: 16px;
        font-weight: normal;
        color: #333;

        @when active {
            color: #ff5d23;
        }
    }
}

/* 编译后 */
.CompName {
    height: 200px;
    width: 200px;
    margin: auto;
}

.CompName-contain {
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.CompName-contain.is-active {
    color: #ff5d23;
}

这种语法的使用只需我们引入postcss-bem这个插件就可以的。但是在webpack4以上的版本中，却会导致编译报错：rule.moveTo is not a function

 xx .moveTo is not a function

这是由于css源字符串解析成的抽象语法树已经废弃了该方法（参考一场由postcss-bem引发的血案）。所以不再能够使用moveto去操作抽象树中的节点。所以使用append方法来代替即可解决该问题。

newComponent.append(rule);
// rule.moveTo(newComponent);

为此，撸了一个npm包，可供后续开发人员调用。包地址：wlq-postcss-bem
由于第一次发布npm包，没有经验，很不规范，欢迎大家指正。github地址：wlq-postcss-bem。
欢迎大家交流使用。

超融合服务器私有云 js 报错异常插件 python报错处理 is在服务器哪里看 moveTo

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114306.html

postcss-bem插件在webpack4以上版本报错处理 .moveTo is not a fu

摘要：强大的插件让我们在编写的过程中获得了极大的便利，比如，我们可以方便的使用语法来命名我们的组件。但是在以上的版本中，却会导致编译报错这是由于源字符串解析成的抽象语法树已经废弃了该方法参考一场由引发的血案。 postcss强大的插件让我们在编写css的过程中获得了极大的便利，比如，我们可以方便的使用BEM语法来命名我们的组件。我是Title 我是内容 @compon...

PiscesYE 2019-08-23 13:48 评论0 收藏0
连接 MySQL 8.x 版本报错解决

摘要：在使用连接版本时遇见了两个问题，通过查询找到了解决方案，记录一下问题问题一解决在驱动属性里设置的值为问题二解决通过上面的报错信息可以发现是时区的问题，因此只要把时区改为当前系统时区即可。使用用户登录，然后执行以下命令设置为北京时区在使用DBeaver连接 MySQL 8.x 版本时遇见了两个问题，通过查询找到了解决方案，记录一下：问题问题一 Public Key Retrieva...

MiracleWong 2019-08-01 13:53 评论0 收藏0
webpack3 升级 webpack4踩坑记录

摘要：本篇不包含所有坑，暂时只记录自己踩到的部分坑一安装安装最新版本安装新增依赖这个在中，本身和它的是在同一个包中，中将两个分开管理。我记录下自己更新这个的过程，以下前半部分可以直接跳过。以下记录踩坑过程。本篇不包含所有坑，暂时只记录自己踩到的部分坑一.安装安装webpack4最新版本 npm install --save-dev webpack@4 安装新增依赖 webpack-c...

马忠志 2019-08-02 15:38 评论0 收藏0
mysql入门

摘要：参照完整性参照的完整性要求关系中不允许引用不存在的实体。与实体完整性是关系模型必须满足的完整性约束条件，目的是保证数据的一致性。然后命令提示符会一直以加一个闪烁的光标等待命令的输入输入或退出登录。介绍 MySQL 是最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System：关系数据...

Jinkey 2019-08-01 14:06 评论0 收藏0
JavaScript 之核心语法 [ 函数和作用域 ]

摘要：函数描述表示定义一段代码，并且可重复使用函数的定义函数声明方式字面量表达方式函数声明方式语法函数名称小括号不可省去函数体函数声明方式在定义函数时，函数体中的内容不会被执行哑吼吼调用函数使用函数名称调用函数的时候会执行函数体中的内容字面量方函数描述表示定义一段JavaScript代码，并且可重复使用函数的定义函数声明方式字面量表达方式函数声明方式语法 function...

joy968 2019-08-23 10:59 评论0 收藏0