UnCSS 设置与早午餐答案

【问题标题】：UnCSS setup with BrunchUnCSS 设置与早午餐
【发布时间】：2016-05-24 15:37:34
【问题描述】：

使用Brunch 作为前端原型的构建工具，我在设置UnCSS-插件时遇到了困难。我安装了Bootstrap 4-skeleton 进行快速设置，除了 UnCSS 之外，一切运行顺利。

我在brunch build --production 上遇到的错误是error: UnCSS: no stylesheets found。我这样配置插件：

  plugins:
    sass:
      options:
        includePaths: [
          'bower_components/bootstrap/scss'
        ]
    postcss:
      processors: [
        require('autoprefixer')
      ]
    babel:
      ignore: [
        /^(bower_components|vendor)/
      ]
    uncss:
        options:
            csspath: 'css/app.css'
            htmlroot: 'public'
        files: ['index.html']

项目的源文件位于app：index.html in app/assets，main.scss（导入 Bootstrap）和styles.css in app/stylesheets，以及app.js in app/javascripts。

Brunch 将其构建到一个名为 public 的文件夹中，样式在 public/css/app.css 中，内容在 public/index.html 中。问题是，UnCSS 的配置有什么不正确的地方？我对它的理解是它适用于构建的 CSS 输出，在这种情况下路径看起来是正确的。

2014 年的 a question on SO 提出了几乎相同的问题，但从未得到答复。

【问题讨论】：

标签： brunch bootstrap-4 uncss

【解决方案1】：

我没有考虑查看 GitHub 问题，其中one specifically addressed this。本质上，正如@1951FDG 所建议的那样：

  plugins:
    uncss:
      options:
        ignore: [/\.\bactive\b/]
        ignoreSheets: [/fonts.googleapis/]
      files: ['public/index.html']

忽略：忽略“.active”类的示例正则表达式

ignoreSheets：忽略 Google 字体的示例正则表达式

更重要的是，此 UnCSS 调用读取链接在 index.html 中的样式表以找到正确的 CSS 文件，然后对其进行处理。

【讨论】：