问题
在一个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把这个样式规则删除了。
解决方案:
- (不推荐)给package.json中browserslist属性增加'Safari >= 6',改变目标适配浏览器,自然会保留这些过时样式规则
- (不推荐)在./build/utils.js文件cssLoaders方法中,给 postcssLoader 变量的options属性增加
autoprefixer: {remove: false}
- (有效)使用官网Control Comments(控制注释)(块级)
/*! autoprefixer: off */ ... /*! autoprefixer: on */ 复制代码
- (无效)使用官网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 */
}
复制代码
失效原因没有查找出来,欢迎补充。