乐趣区

关于前端:Autoprefixer-applies-control-comment-to-whole-block警告的解决方案

jiezi

前言

最近 pull 了某环保我的项目最新代码，启动 devServer 时，终端报如下正告：

(Emitted value instead of an instance of Error) autoprefixer:xxx\code\ep-smp-pc-web\src\pages\SpecialAction\SpecialInfo\SpecialInfo.less:3218:3: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

找到源文件 SpecialInfo.less，首先想到应该是 Autoprefixer 正文出了问题。

.describeList-value{
  line-height: .35rem;
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: off */ 
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

为何要应用 Autoprefixer 正文？
因为 -webkit-box-orient 是老式过期的 CSS 属性，若 webpack 配置了 postcss-loader， Autoprefixer 会主动将其移除。

解决路径

那如何保留-webkit-box-orient 属性？

有如下几种解决方案。

一、不配置 Autoprefixer 属性

在 postcss-loader 的 options 不引入 Autoprefixer 配置。

毛病：其它须要兼容浏览器款式的中央都得靠开发本人去加前缀，累死，不可取。

二、勾销 Autoprefixer 的 remove 性能

可在 webpack.config 文件中批改 Autoprefixer 配置，减少一行配置 remove: false；

{loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebookincubator/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009',
          remove: false,
        }),
    ],
  },
},

毛病：既然 Autoprefixer 会主动删除 -webkit-box-orient 属性，那它必定是认为有些 CSS 属性是真心过期了，不举荐开发者应用（尽管 Autoprefixer 配置了 control comment 性能，让开发者部分 disable Autoprefixer）；若真的敞开 Autoprefixer remove 性能，那我的项目中可能会充斥大量过期的 CSS 属性，不利于保护，这种计划集体不举荐应用。

三、终极计划：正确应用 autoprefixer control comment 性能

回过头来再看前言中提到的正告提醒：
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

认真去了解这段英文，翻译成大白话就是：
第二个 Autoprefixer 正文被忽略了，Autoprefixer 正文应该被用于整个代码块，而不是下一条规定。也就是 /* autoprefixer: off */ 在一个代码块中不能够再作用于 /* autoprefixer: on */。

注：”整个代码块”指的是款式 .describeList-value {} 大括号中的范畴，不是指以后 Less 文件的全局范畴。

查阅 autoprefixer 官网，官网对同个代码块中屡次应用 control comment 做了提醒阐明：
Note that comments that disable the whole block should not be featured in the same block twice。

所以，最终只应用 /* autoprefixer: off */ 一个正文就能够了，可将 /* autoprefixer: on */ 正文勾销，则 warning 隐没。款式如下：

.describeList-value{
  line-height: .35rem;
  white-space: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: off */ 
  // 只会作用于以后 block，非全局
  -webkit-box-orient: vertical;
}

/* autoprefixer: off */ 或 /* autoprefixer: on */ 放在 block 哪个中央能够，因为它们作用于整个 block。

退出移动版