nuxt-purgecss с mdb-vue не работает на производстве - PullRequest
Новая
       19

nuxt-purgecss с mdb-vue не работает на производстве

0 голосов
/ 09 июля 2019

Я пытаюсь внедрить nuxt-purgecss в свой проект nuxt, я также использую mdb-vue (Bootstrap Material Design).

Кажется, что он отлично работает в dev, .. но после того, как я соберу 'nuxt generate' или 'npm run generate'

Я пытался использовать 'with-nuxt-manual' и 'with-nuxt-module' из https://github.com/FullHuman/purgecss/tree/master/examples

оба дают одинаковые результаты, css очищается в dev, но не после генерации nuxt

вот мой ручной режим настройки ..

nuxt-config.js 

import path from 'path'
import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'

export default {
  mode: 'universal',
  dev: process.env.NODE_ENV !== 'production',
  css: ['bootstrap-css-only/css/bootstrap.min.css', 'mdbvue/build/css/mdb.css'],

  modules: [
    '@nuxtjs/pwa',
    '@nuxtjs/eslint-module',
    'nuxt-fontawesome',
    'bootstrap-vue/nuxt'
  ],
  build: {
    extractCSS: true,
    extend(config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
      if (!isDev && isClient) {
        // Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
        // for more information about purgecss.
        config.plugins.push(
          new PurgecssPlugin({
            paths: glob.sync([
              path.join(__dirname, './pages/**/*.vue'),
              path.join(__dirname, './layouts/**/*.vue'),
              path.join(__dirname, './components/**/*.vue')
            ]),
            whitelist: ['html', 'body']
          })
        )
      }
    },
    transpile: ['mdbvue']
  }
}

Кажется, я не могу найти какую-либо документацию для настройки webpack для bootstrap / mdb с purgecss.

1 Ответ

0 голосов
/ 10 июля 2019

Я решил проблему, я уверен, что pwa и кэшированные файлы давали мне запутанные результаты.

С моим текущим рабочим nuxt.config.js (см. Ниже)

  • Я тестирую в режиме разработки "npm run dev", а css не удаляется (что я хочу).
  • затем я запускаю "npm run generate" и тестирую локально, css очищается (что я хочу).
  • затем я нажимаю на github dev branch, netlify собирает и развертывает промежуточный поддомен, я проверяю там, .. css очищен (что я хочу).
  • наконец, я объединяю ветку dev с master и отправляю в github, собираю и развертываю netlify, я проверяю, что css очищен (что я хочу). 
  build: {
    extractCSS: process.env.NODE_ENV === 'production',
    extend(config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
      if (isDev && isClient) {
        config.plugins.push(
          new PurgecssPlugin({
            paths: glob.sync([
              path.join(__dirname, './pages/**/*.vue'),
              path.join(__dirname, './layouts/**/*.vue'),
              path.join(__dirname, './components/**/*.vue')
            ]),
            whitelist: ['html', 'body']
          })
        )
      }
    },
    transpile: ['mdbvue']
  }
...