# Breaking up common.scss into multiple files in components?

**URL:** https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417
**Category:** Support
**Created:** [March 1, 2019, 6:30am UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417 "2019-03-01T06:30:05Z")
**Posts on this page:** 1
**Showing post:** 6

<div class="post-metadata">

### Author: ![labofoz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/labofoz/32/135498_2.png) [@labofoz](https://meta.discourse.org/u/labofoz)
#### Post date: [March 16, 2019, 12:46am UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/6 "2019-03-16T00:46:49Z")

</div>

Thanks guys! For now, my workaround was to use Webpack to compile all my scripts into one, and then inject that one script inline using this command inside of a template file:

```html
<script>
  <%= compilation.assets['main.js'].source() %>
</script>

```

and the same for SCSS. I turned it into a boilerplate in case anyone else needs it, and wrote more about it here: [Discourse-webpack: A boilerplate for developing JS-heavy Discourse components](https://meta.discourse.org/t/discourse-webpack-a-boilerplate-for-developing-js-heavy-discourse-components/111750)

[https://github.com/BrowseHandsfree/discourse-webpack](https://github.com/BrowseHandsfree/discourse-webpack)

I organized it in anticipation of making it work seamlessly with the Theme CLI (that’ll be ready in a week or so). My vision with this is to build some components with Vue/React locally and see them pop up live on the Theme Creator!

---

_[View the full topic](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417)._