I'm using in my project bootstrap and webpack. I'm importing bootstrap library from source files, in this way I'm able to import only css and js component I need. However I want more advanced optimization for my css and I'm using purgecss too. Purgecss needs to point out pages that have html or injects html, into the content option of the plugin. I have this configuration in my
webpack.production.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
//prettier-ignore
plugins:[autoprefixer(),
purgecss({
content: [
"./src/**/index.ejs",
//"./dist/**/index.html",
//"./dist/**/*.js",
"./node_modules/bootstrap/js/src/popover.js",
"./src/**/*.js",
],
})],
},
},
},
],
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer(),
purgecss({
content: [
"./src/**/index.ejs",
//"./dist/**/index.html",
//"./dist/**/*.js",
"./node_modules/bootstrap/js/src/popover.js",
"./src/**/*.js",
],
}),
],
},
},
},
"sass-loader",
],
},
I'm using purgecss with postcss.
However the purgecss plugin seems doesn't recognize my index.ejs file and vital css is removed . If I cheat and I point out to my purgecss plugin the index.html file generated in the dist folder in the previous build it's all right. Then, purgecss can't handle .ejs files? Is there some workaround?
(Note that I have to indicate to the plugin the popover.js of the bootstrap library otherwise the css of the popover isn't included because it's a dynamic component not present in the html page but is added by popover.js)
(Note that my example is a minimal reproducible example to illustrate the problem)
