Как работает извлечение Nuxt JS css для созданных веб-сайтов stati c? - PullRequest
Новая
       7

Как работает извлечение Nuxt JS css для созданных веб-сайтов stati c?

0 голосов
/ 14 января 2020

Я пытаюсь создать сайт c из моего (минимального) кода с 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}}

Конечно, это заставляет мою карту рендериться довольно странным образом, потому что большая часть 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, а не в режиме stati c?

1 Ответ

1 голос
/ 15 января 2020

Вы используете nuxt-purgecss, который использует продувка css для удаления неиспользованных CSS.

purgecss do scan HTML ( или vue) файлы для используемых классов CSS, а затем удаляют неиспользуемые классы из окончательного пакета CSS.

Вы можете взглянуть на конфигурацию purgecss по умолчанию, используемую nuxt-purgecss здесь . В paths перечислены пути, которые purgecss будет сканировать для использования CSS.

Поскольку вы не используете большую часть leaflet css напрямую (в ваших компонентах), необходимо настроить purgecss, чтобы не удалять листовки css.

* 1022. * Вы можете сделать это с помощью белого списка (кстати, не уверен, будет ли работать метод "comment" в Vue \ Nuxt)

Вы можете прочитать больше здесь и здесь

Не проверено !! 

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

Относительно сообщения об ошибке

Сообщение об ошибке от nuxt-purgecss модуля - это четко задокументировано здесь

Я не очень хорошо знаю процесс сборки Nuxt. Поэтому я просто предполагаю из документов , что extractCSS: true будет использовать extract- css -chunks-webpack-plugin , чтобы извлечь все CSS в отдельный CSS файл, в то время как (по умолчанию) extractCSS: false будет использовать PostCSS для извлечения всех CSS и помещения их непосредственно в тег <style> отображаемой страницы.

Все это не имеет значения, ИМХО, поскольку проблема root заключается в использовании purgecss, и решение состоит в том, чтобы правильно настроить его для белого списка leaflet CSS классов ....

...