Embarking on my Aurelia journey, I find myself navigating through the vast world of web development with tools like nodejs, gulp, and more.
The Aurelia CLI has made it convenient for me to set up a visually appealing Aurelia project in Visual Studio Code using Typescript + SASS. As I ventured into scoped CSS, I realized there is an abundance of information on the topic, yet implementing practical solutions proved challenging. Thus, I devised my own approach:
- I have general stylesheets that are universally importable without additional steps.
- For component-specific styling, I create corresponding stylesheets named after the component (e.g., component.scss) to encapsulate styles specific to each component's view and model.
My attempts at utilizing scoped HTML tags were hampered by poor browser support, prompting me to explore alternatives like https://github.com/bryanrsmith/aurelia-binding-loader, which yielded unsatisfactory results due to performance issues.
With limited knowledge, I experimented with transforming CSS into a JS object dynamically, leading me to envision a build-time conversion process. In my rudimentary understanding of Gulp, I adapted process-css.ts:
// Add your custom code here...While this alteration is a work in progress, I'm pondering how to seamlessly inject the new object containing styles into the bundle as a ".js" extension. Suggestions on a smoother integration process would be greatly appreciated!
Although focused on scoped CSS classes, I contemplate whether embedding component.scss styles directly into component.html during compilation could be a viable alternative. If so, what implications might arise from such a practice? Your insights on these matters would be invaluable as I navigate this unfamiliar terrain.
Forgive any perceived naivety in my inquiries; delving into this realm is akin to stepping into uncharted territory.
Thank you for your guidance!