CSS customization not working in production

[Edmund1645]

Hello, thanks for this super helpful plugin. I tried making some customizations of my own to the appearance of the toast container and the action text but it doesn't work when I deploy to Netlify.

I use this in a Nuxt project, and the CSS is registered globally in the nuxt.config.js file.

This is a snippet of what I did:

/* toast action */
.toasted .primary .action,
.toasted.toasted-primary .action {
  color: #202f36 !important;
}

/* toast container */
.toasted .primary,
.toasted.toasted-primary {
  font-weight: 500 !important;
  padding: 6px 30px !important;
  /* border-radius: 999px !important; */
}

/* success toast */
.toasted .primary.success,
.toasted.toasted-primary.success {
  background: #4db76d !important;
  box-shadow: 0px 6px 16px rgba(94, 203, 127, 0.5) !important;
}

the modifications work locally, I even used !important to be sure they work because custom classes didn't for me.

I do not see this snippet modifying the toast when I inspect the element.

I was hoping i could get an insight on how best to achieve what I wanted. Thanks.

[luispittagros]

Found a solution?

[Edmund1645]

Yeah, it was because of PurgeCSS

/*! purgecss start ignore */
.m-toast-container > .toasted.toasted-primary > .m-toast-action {
  @apply text-m-army-green;
}

.m-toast-container > .toasted.toasted-primary {
  @apply font-medium;
  padding: 6px 30px;
}

.m-toast-container > .toasted.toasted-primary.success {
  @apply bg-m-green-dark;
  box-shadow: 0px 6px 16px rgba(94, 203, 127, 0.5);
}
/*! purgecss start ignore */

use comments like above to make it ignore the custom CSS