使用 Brunch 设置 UnCSS

Question

使用 Brunch as my build-tool for a front-end prototype, I am having difficulty setting up the UnCSS-plugin. I installed the 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 在 app/stylesheets 和 app.js 在 app/javascripts.

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

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

Answer 1

我没有考虑看 GitHub 问题，其中 one specifically addressed this. In essence, as suggested by @1951FDG:

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

ignore: sample regex to ignore '.active' class

ignoreSheets: sample regex to ignore Google fonts

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

使用 Brunch 设置 UnCSS

UnCSS setup with Brunch

brunch

bootstrap-4

uncss