[Sage 10] Use pcss extension instead of css

bud
1

Hi everyone,

I want to use the pcss extension for my style files instead of the css extension. However, the extension is not recognized at build time.
My research in the bud documentation did not allow me to find out how to configure this. Is this option configurable in bud?

Thank you!

2

I think it’s fine but is also a level of customization we can’t officially support.

You’ll need to add support for .pcss and then either modify the css pattern entry or update the css rule. Maybe both. There may be other things you need to change but most of these values should be centralized.

Adding .pcss

You’ll use the build.resolve.extensions hook.

app.hooks.on('build.resolve.extensions', (ext) => [...ext, '.pcss']);

Modify the css rule pattern

You’ll use the Rule API’s setTest method:

app.build.rules.css.setTest(/\.pcss$/);

Modify the css pattern

You’ll use the bud.store container. I never really imagined this being a use case for the store patterns but since nearly everything in the framework that has use for an extension regexp references this value it might be kind of perfect?

app.store.set('patterns.css', /\.pcss$/);
1 Like