Can I use the existing "webpack watch" to build and inject styles/assets into a non-wp subdirectory?

Hi guys,

I am starting a project using Sage/Bedrock, and I have decided to start building components using a pattern library.

I have installed the astrum pattern library tool as an npm package globally and initialised a pattern library in a subdirectory of my web directory (project_dir/site/web/patternlib).

The pattern library allows for reading an existing CSS file to style the components, but if I am writing CSS in SASS using webpack’s watch facility, the styles in assets/dist/styles/main.css is deleted when I start.

With webpack started, I can see the pattern library using http://localhost:3000/patternlib and when I save changes to my SCSS, I get the usual in-browser notifications that the CSS has been rebuilt. However, no styles are applied from my stylesheet at any time.

Looking at Safari’s web inspector, in the Network tab, I can see that the hotmiddleware JS is firing but no CSS blob is being injected. When I look at the website normally using http://localhost:3000/ I can see the CSS blob being injected.

To get my CSS loaded on the page in the /patternlib directory, do I need to add a path into the webpack config somewhere, or do I need to set something up in the HTML head? Any ideas?