Closed YIZHUANG closed 5 years ago
Thanks for reporting. Can you share a reproduction ? I can help investigate.
Thanks for reporting. Can you share a reproduction ? I can help investigate.
Hi, this is the repo. https://github.com/YIZHUANG/nextjs-semantic-purgecss
Just npm install and npm run dev
In the TestPage i am using the "Accordion" from "semantic-ui", but there is no styling at all if "withPurgeCss" is added
Since your pages are in a src
directory and that is not standard, you need to add this configuration for purgecss to scan the right files for css classes/ids names :
{
// some config here
purgeCssPaths: ['src/pages/**/*']
}
Since your pages are in a
src
directory and that is not standard, you need to add this configuration for purgecss to scan the right files for css classes/ids names :{ // some config here purgeCssPaths: ['src/pages/**/*'] }
Hi, i tried with
const plugins = [withCSS, withSass, [withPurgeCss, {
purgeCssPaths: ['src/pages/**/*']
}]];
Still doesn't work.
It doesn't work because the class names are not present in the pages of your app.
The way the purgecss library work is simple : it scans files for class names (here your pages files) and removes unnecessary styles accordingly. From what I see in your code, you're using react components so the class names are not present in the files.
It seems the library you're using is offering solutions for you to only bundle the necessary css : https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf
I am using a custom theme
When i am importing
in _app.js.
Here is my config:
After build i can see a bunch of unused css codes are removed, but somehow the needed css codes are also removed by this plugin...