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

Question

我正在尝试从 my (minimal) code 生成一个静态网站与 Nuxt。在该代码中，我特别集成了 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}}

当然，这使得我的 map 以一种非常奇怪的方式呈现，因为大部分 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 包中删除未使用的类。

你可以看看默认purgecss nuxt-purgecss 使用的配置here . paths列出路径 purgecss将扫描 CSS 使用情况。

因为您没有使用大部分 leaflet css 直接(在你的组件中)，有必要配置 purgecss不要删除传单的 css。

你可以通过 whitelisting 做到这一点(顺便说一句，不确定“评论”方法是否适用于 Vue\Nuxt)

您可以阅读更多here和 here

未测试!!

// nuxt.config.js
{
  purgeCSS: {
    whitelistPatterns: [/leaflet/, /marker/]
  }
}

---

关于错误信息

错误信息来自nuxt-purgecss模块 - 清楚地记录在案 here

我对 Nuxt 构建过程了解不深。所以我只是从 docs 假设那extractCSS: true将使用 extract-css-chunks-webpack-plugin将所有 CSS 提取到单独的 CSS 文件，同时(默认)extractCSS: false将使用 PostCSS提取所有 CSS 并将其直接放入 <style>渲染页面的标签。

恕我直言，所有这些都无关紧要，因为根本问题在于使用 purgecss解决方案是将其正确配置为白名单 leaflet CSS 类....