带有 mdb-vue 的 nuxt-purgecss 无法在生产中运行答案

【问题标题】：nuxt-purgecss with mdb-vue not working in production带有 mdb-vue 的 nuxt-purgecss 无法在生产中运行
【发布时间】：2019-11-19 06:23:03
【问题描述】：

我正在尝试在我的 nuxt 项目中实现 nuxt-purgecss，我也在使用 mdb-vue(Material Design Bootstrap)。

它似乎在开发中运行良好，.. 但是在我使用 'nuxt generate' 或 'npm run generate' 构建之后

我尝试过使用 'with-nuxt-manual' 和 'with-nuxt-module' https://github.com/FullHuman/purgecss/tree/master/examples

两者都给出相同的结果，css 在 dev 中被清除，但不是在 nuxt generate 之后

这是我的手动模式配置..

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']
  }
}

我似乎找不到任何使用 purgecss 为 bootstrap/mdb 配置 webpack 的文档。

【问题讨论】：

标签： twitter-bootstrap vue.js webpack nuxt.js

【解决方案1】：

我已经解决了这个问题，我很确定 pwa 和缓存文件给了我令人困惑的结果。

使用我当前工作的 nuxt.config.js（见下文）

我在开发模式“npm run dev”下测试，但 css 没有被清除（我想要的）。
然后我运行“npm run generate”并在本地测试，css 被清除（我想要的）。
然后我推送到 github dev 分支，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']
  }

【讨论】：