Vue 3 + Vite + Bootstrap + PurgeCSS

README.md

Setup

Bootstrap

1. Install package

npm i bootstrap

2. Create bootstrap.sass [css, scss, ...] file in assets/ folder and import Bootstrap styles

@import '../../node_modules/bootstrap/scss/bootstrap'

3. Import this file into src/main.js to plug in styles to your Vue app

import "./assets/bootstrap.sass";

PurgeCSS

1. Install dependencies

npm i -D purgecss @fullhuman/postcss-purgecss

2. Add postcss.config.js file to the root of the project (near package.json)

const postCssPurge = require("@fullhuman/postcss-purgecss");

const vuePath = /\.vue(\?.+)?$/;

module.exports = {
  plugins: [
    postCssPurge({
      contentFunction: (sourceInputFile) => {
        if (vuePath.test(sourceInputFile)) {
          return [sourceInputFile.replace(vuePath, ".vue")];
        }
        return ["src/**/*.vue", "index.html"];
      },
      defaultExtractor(content) {
        if (content.startsWith("<template")) {
          content = `${content.split("</template")[0]}</template>`;
        }
        return content.match(/[\w-/:]+(?<!:)/g) || [];
      },
    }),
  ],
};