NuxtJS css提取如何用于生成的静态网站？

Question

我正在尝试使用Nuxt从my (minimal) code生成一个静态网站。在该代码中，我特别集成了tailwindcss工具包和vue2-leaflet。在

nuxt generate

我得到两个css文件，一个用于tailwindcss css，另一个用于leaflet css。虽然前一个文件很好，包含了我需要的所有内容，但后者却很少：

.leaflet-tile-pane{z-index:200}@-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}@keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}

当然，这使我的地图以一种非常奇怪的方式呈现，因为大多数css都丢失了。这是我当前的nuxt.config.js：

module.exports = {
  mode: 'universal',

  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  css: [
  ],

  plugins: [
    { src: '~plugins/leaflet.js', mode: 'client' }
  ],

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

  modules: ['@nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],

  [...]

  build: {
    extractCSS: true,
  }
}

摆脱extractCSS最终将所有相关的CSS合并到index.html中。它有效，但是随后出现以下错误：

ERROR  Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode

我不确定我是否了解整个CSS提取的工作方式。有人可以启发我吗？为什么在extractCSS: true下不起作用？我该如何运作？为什么它可以在SPA模式下工作，但不能在静态模式下工作？

Answer 1

您正在使用nuxt-purgecss，它正在使用nuxt-purgecss剥离未使用的CSS。

purgecss会扫描HTML（或vue）文件中正在使用的CSS类，然后从最终的CSS包中剥离未使用的类。

您可以查看purgecss purgecss使用的默认nuxt-purgecss配置。 here列出了paths将扫描的CSS用法路径。

由于您没有直接（在您的组件中）直接使用大多数purgecss css，因此有必要将leaflet配置为不删除传单的css。

您可以通过purgecss来做到这一点（再不确定“ comment”方法是否可以在Vue \ Nuxt中使用）

您可以阅读更多whitelisting和here

未经测试！

here