我應該在 UnCSS 插件上忽略什么字符串才能使 Foundation 6 的響應式菜單正常工作？

Question

我用 NPM 安裝了 Foundation 6，用foundation new命令開始了一個新項目，並開始構建一個新網站。 但是，當我使用命令foundation build --production在生產環境中構建它時， .top-bar類總是折疊，即使是在大型顯示器上也是如此（注意data-hide-for="medium" ）。 當我使用foundation watch命令在開發模式下運行它時，它工作得很好（僅在中小型設備上崩潰）。

我認為可能是gulp的一些任務有問題，我決定一一測試。 當我將uncss修改為僅在開發模式下運行（將isProduction var 更改為false布爾值）時，它起作用了，所以。 我決定閱讀他們的文檔，在那里我找到了“忽略”設置。 我可以在其中設置一些選擇器，這是我的問題嗎？ 我必須忽略什么選擇器才能使折疊效果很好。 我認為 UnCSS 正在刪除一些它認為 *,html 文件沒有使用的選擇器。 但它是，我無法確定它是哪個選擇器。

注意： uncss任務僅在生產模式下運行。

index.html

<div class="title-bar" data-responsive-toggle="top-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="top-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li>
                <input type="text" placeholder="Login">
            </li>
            <li>
                <input type="password" placeholder="Password">
            </li>
            <li>
                <button type="button" class="button">Login</button>
            </li>
        </ul>
    </div>
</div>

gulpfile.js （這是Foundation for sites complete template的默認，所以我只放CSS編譯部分）

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  var minifycss = $.if(isProduction, $.minifyCss());

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(uncss)
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({stream: true}));
});

整個 CSS 沒有改動，我沒有修改任何東西，甚至路徑都是默認的（但我添加了一些規則，比如字體和一些顏色），我只是刪除了 Foundation 6 的默認 index.html 並添加了這個菜單（那是在他們的文檔上）。

為了幫助你，我在 MEGA 上上傳了整個項目，只需解壓縮並運行foundation watch ，看到.top-bar工作正常（帶有菜單和登錄表單），然后運行foundation build --production並運行index.html dist文件夾中的index.html可以看到.top-bar折疊了。

.top-bar生產：

.top-bar開發（工作）：

Answer 1

我遇到了類似的問題，並通過以下 gulp-uncss 設置進行了修復：

   .pipe(uncss({
      html: ['./*.html'],
      ignore: [new RegExp('^meta\..*'),
        new RegExp('.*\.is-.*'),
        new RegExp('.*\.top-bar.*'),
        new RegExp('.*\.menu.*')]
    }))

Answer 2

將foundation-mq類添加到您的忽略列表中。 只有正則表達式對我有用： /foundation\-mq/ 。

---

在_global.scss

// These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
.foundation-mq {
  font-family: '#{-zf-bp-serialize($breakpoints)}';
}