PurgeCSS

Vue

使用 vue CLI 外掛

vue cli plugin purgecss

安裝

如果您尚未安裝 vue-cli 3，請先按照此處的安裝說明進行操作：https://github.com/vuejs/vue-cli

使用 vue-cli 3.0 產生專案

vue create my-app

在安裝 PurgeCSS 外掛之前，請務必提交或暫存您的變更，以防需要還原變更。

要安裝 PurgeCSS 外掛，只需導覽至您的應用程式資料夾並新增 PurgeCSS。

cd my-app

vue add @fullhuman/purgecss

PurgeCSS 外掛會產生一個已設定好 PurgeCSS 的 postcss.config.js 檔案。您之後可以修改 PurgeCSS 選項。

使用

以下是此外掛設定的 PurgeCSS 選項

{
  content: [ `./public/**/*.html`, `./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}