Question

我正在尝试将nuxt-purgecss实现到我的nuxt项目中，我也正在使用mdb-vue（材料设计引导程序）。

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

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

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

具有mdb-vue的nuxt-purgecss在生产中不起作用

1 个答案: