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，它正在使用purgecss剥离未使用的CSS。

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

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

由于您没有直接使用大部分purgecss CSS（在您的组件中），因此有必要将// nuxt.config.js { purgeCSS: { whitelistPatterns: [/leaflet/, /marker/] } }配置为不删除传单的CSS。

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

您可以阅读更多here和here

未经测试！

nuxt-purgecss

关于错误消息

错误消息来自extractCSS: true模块-明确记录了here

我对Nuxt的构建过程不了解。因此，我只是从docs假设extractCSS: false将使用extract-css-chunks-webpack-plugin提取所有CSS到单独的CSS文件，而（默认）PostCSS将使用<style>提取所有CSS并将其直接放入渲染页面的purgecss标签中。

所有这些都与恕我直言无关紧要，因为根本问题是使用leaflet并且解决方案是正确配置它以将{{1}} CSS类列入白名单...。

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

1 个答案:

关于错误消息