Roots Discourse

Sage 10 does not compile SCSS of SVG "path" selector on build:production

[EDIT] It is something purgeCss related. Comenting purgeCss in webpack.mix.js fix the problem. Maybe purgeCss cant see inside SVG.

Hi, I’m working on this prototype:

These buttons has a SVG with a simple path:

Captura de pantalla 2021-01-03 13.05.42

its fill color changes regarding its class:

It works well at yarn build and it doesn’t work at yarn build:production. I’ve noticed that any SCSS containing path selector is not transpiled to plain CSS when is buit to production. It Is completely removed from CSS.

Is it a bug or an expected behavior?

Adding my own whitelist for purgeCSS to webpack.mix.js (note “path” at the end of the list).

let whitelist = [

  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
    extend: { content: [path.join(__dirname, 'index.php')] },
    whitelist: whitelist,
    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,

Original list:

1 Like