问题

在一个vue-cli2的项目中，使用Less写了一个文字2行溢出后显示“...”的样式，本地完美。使用 autoprefixer^9.5.1 打包后，-webkit-box-orient: vertical;被删除了。

开发代码(less)

.doc-name {    ...    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}复制代码

package.json文件中browserslist

{    ...    "browserslist": [        "> 1%",        "last 2 versions",        "not ie <= 8"    ] }复制代码

输出结果

.doc-name {    ...    display: -webkit-box;    -webkit-line-clamp: 2;}复制代码

最后定位到，是autoprefixer把这个样式规则删除了。

解决方案：

1. （不推荐）给package.json中browserslist属性增加'Safari >= 6'，改变目标适配浏览器，自然会保留这些过时样式规则
2. （不推荐）在./build/utils.js文件cssLoaders方法中,给 postcssLoader 变量的options属性增加autoprefixer: {remove: false}
3. （有效）使用官网Control Comments(控制注释)（块级）

   /*! autoprefixer: off */    ...    /*! autoprefixer: on */复制代码

4. （无效）使用官网Control Comments(控制注释)（单行）

   /*! autoprefixer: ignore next */    ...复制代码

我不喜欢方案1，方案2。

• 方案1，会增加一些我不想去适配的浏览器的代码。
• 方案2，没有帮我删除多余的一些过时代码。
• 方案3， 方案4，为什么用/*!...\*/这种方式书写，和autoprefixer的github上的readme中demo不一致，多了'!'。原因：在postcss-loader在处理css时会把非'!'开头的comment(注释)删除掉了。

postcss-discard-comments源代码：

postcss-discard-comments\dist\lib\commentRemover.js

CommentRemover.prototype.canRemove = function (comment) {    var remove = this.options.remove;    if (remove) {        return remove(comment);    } else {        // 以!开头的注释是重要的，不删除        var isImportant = comment.indexOf('!') === 0;        if (!isImportant) {            return true;        } else if (isImportant) {            if (this.options.removeAll || this._hasFirst) {                return true;            } else if (this.options.removeAllButFirst && !this._hasFirst) {                this._hasFirst = true;                return false;            }        }    }};复制代码

查看autoprefixer源代码：

node_modules\autoprefixer\lib\processor.js

// ！可有可无var IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i;..._proto.disabled = function disabled(node, result) {    ...    if (p && p.type === 'comment' && IGNORE_NEXT.test(p.text)) {        node._autoprefixerDisabled = true;        node._autoprefixerSelfDisabled = true;        return true;    }    ...    // ！可有可无    if (/(!\s*)?autoprefixer:\s*(off|on)/i.test(i.text)) {      if (typeof status !== 'undefined') {        result.warn('Second Autoprefixer control comment ' + 'was ignored. Autoprefixer applies control ' + 'comment to whole block, not to next rules.', {          node: i        });      } else {        status = /on/i.test(i.text);      }    }}复制代码

可以看到这两个Control Comment可以用/*! ... */这种方式书写。

方案测试结果：

方案3，有效

/*! autoprefixer: off */ ... /*! autoprefixer: on */

开发代码(less)

.doc-name {    ...    display: -webkit-box;    -webkit-line-clamp: 2;    /*! autoprefixer: off */    -webkit-box-orient: vertical;    /*! autoprefixer: on */}复制代码

输出结果

.doc-name {    ...    display: -webkit-box;    -webkit-line-clamp: 2;    /*! autoprefixer: off */    -webkit-box-orient: vertical    /*! autoprefixer: on */}复制代码

方案4，无效

/*! autoprefixer: ignore next */

输出结果(less)

.doc-name {    ...    display: -webkit-box;    -webkit-line-clamp: 2;    /*! autoprefixer: ignore next */    -webkit-box-orient: vertical;}复制代码

output

.doc-name[data-v-2da4f5e4] {    ...    display: -webkit-box;    -webkit-line-clamp: 2    /*! autoprefixer: ignore next */}复制代码

失效原因没有查找出来，欢迎补充。