如何在 Grunt-Uncss 忽略函数中包含 @media答案

【问题标题】：How to include @media in Grunt-Uncss Ignore Function如何在 Grunt-Uncss 忽略函数中包含 @media
【发布时间】：2019-09-10 19:20:42
【问题描述】：

我正在使用 Grunt 删除页面上未使用的 CSS。一切都很好，但不幸的是有时有一些代码 sn-ps 被删除，尽管对网站至关重要。

我希望 Grunt 忽略所有 @media (min-width: ...) CSS 规则，但我不知道如何在我的Gruntfile.JS 中表达。

例如：

styles.css

@media (min-width: 1025px) {
  .col2-set {
    width: 62.2% !important;
    float: left;
    margin-top: 45px;
    padding: 0 90px 0 10px; }
  #order_review {
    width: 37.8%;
    float: right;
    margin-top: 45px; } }

这可能很简单，但我仍然没有找到解决方案。谁能给个提示？

非常感谢！

Gruntfile.js

uncss: {
        dist: {
        options: {
            ignore       : [
                          /expanded/,
                          /js/,
                          /wp-/,
                          /align/,
                          /admin-bar/,
                          /\w\.in/,
                          /.*footer.*/,
                          /.*footer*/,
                          "^meta\..*",
                          "^\.is-.*",
                          "/^#js/",
                          ".fade",
                          ".nav",
                          ".collapse",
                          ".collapsing"                            
                          ],

【问题讨论】：

标签： javascript css node.js json gruntjs

【解决方案1】：

将注释：/* uncss:ignore start */ 添加到 styles.css 文件中 @media ... 查询之前的行，并将结束注释 /* uncss:ignore end */ 添加到结尾之后的下一行@media 查询。

这两个 cmets 之间的任何规则都将被忽略。

styles.css 示例：

/* uncss:ignore start */
@media (min-width: 1025px) {
  .col2-set {
    width: 62.2% !important;
    float: left;
    margin-top: 45px;
    padding: 0 90px 0 10px;
  }

  #order_review {
    width: 37.8%;
    float: right;
    margin-top: 45px;
  }
}
/* uncss:ignore end */

【讨论】：