Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What is the styleExtensions attribute for? #49

Closed
bart opened this issue Jul 4, 2019 · 3 comments
Closed

What is the styleExtensions attribute for? #49

bart opened this issue Jul 4, 2019 · 3 comments

Comments

@bart
Copy link

bart commented Jul 4, 2019

Hey everyone,

I'm running a nuxtJS project with element UI and I'm not be able to get it running in build mode. PurgeCSS removes all element UI classes. So I looked into the configuration options and found styleExtensions but no information about it. Could anyone explain in one or two sentences what this option does? Is it the css option of purgeCSS? Thanks!

@manniL
Copy link
Member

manniL commented Jul 4, 2019

Hey @bart 👋
It seems like it's an old option for the webpack plugin but not related to the issue you mean.

PurgeCSS has likely problems to detect what CSS classes you use because Element-UI is a component-based library. As it doesn't know the content of the components you use, it doesn't know that the CSS is used at all. But this is explained in some other threads/issues. Generally it is difficult to use purgecss with vue-based component css libraries.

@manniL manniL closed this as completed Jul 4, 2019
@bart
Copy link
Author

bart commented Jul 4, 2019

Hey @manniL ,

thanks a lot for you quick answer. I know that it's difficult to use PurgeCSS with a component based Nuxt plugin / framework. After struggling around with that issue I found a solution which might not be ideal but maybe someone who comes up with the same problem can use a similar approach.

I'm using the purgecss-whitelister package and configured my purgeCSS attributes like this:

purgeCSS: {
    whitelist: [
      'antialiased',
      'leading-normal',
      ...whitelister([
        'node_modules/tailwindcss/lib/plugins/css/preflight.css',
        'node_modules/element-ui/lib/theme-chalk/select.css',
        'node_modules/element-ui/lib/theme-chalk/input.css',
        'node_modules/element-ui/lib/theme-chalk/rate.css'
      ])
    ],
    whitelistPatternsChildren: [/^__nuxt/],
    whitelistPatterns: [/^__nuxt/]
  },

Cheers 🎉

@roselily8
Copy link

Hi Bart, how do you include whitelister in nuxt.config.js. It doesn't work for me. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants