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?