# 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:** 7
**Page:** 1
### Author:  [@labofoz](https://meta.discourse.org/u/labofoz)
#### Post date: [March 1, 2019, 6:30am UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/1 "2019-03-01T06:30:06Z")
Hi! I’m developing a component and can’t seem to `@import` additional styles from my `MyTheme/common/common.scss`, which contains the following:
```scss
@import '../assets/styles/handsfree';
@import '../assets/styles/splash';
```
My theme component directory looks like:
```plaintext
|-- assets
| |-- styles
| | |-- handsfree.scss
| | |-- splash.scss
|-- common
| |-- common.scss
|-- about.json
|-- settings.yml
```
Here’s an example of the error I get. I’ve run `discourse_theme watch .` in the directory above:
I’ve tried `@import`ing with the following:
```css
@import '../assets/styles/handsfree';
@import '/assets/styles/handsfree';
@import 'assets/styles/handsfree';
@import 'styles/handsfree';
```
Is the import relative to somewhere other than the theme? Basically my `common.scss` is getting huge and I’d like to split that up
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 1, 2019, 6:38am UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/2 "2019-03-01T06:38:13Z")
@david has this kind of stuff high on our list, we want theme devs to be able to split off scss files, split of js files to multiple .es6 files and so on.
Current structure is very limiting for ultra advanced usage.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [March 1, 2019, 11:26am UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/4 "2019-03-01T11:26:06Z")
> [@labofoz](#):
>
> Is the import relative to somewhere other than the theme?
Right now it’s impossible to import other files within a theme. As @sam said we are hoping to improve that soon 🙂
---
### Author:  [@julienbourdeau](https://meta.discourse.org/u/julienbourdeau)
#### Post date: [March 5, 2019, 6:42pm UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/5 "2019-03-05T18:42:51Z")
Thank you @david and @sam 🙏
I had the same issue, I thought I did something wrong. Thanks @labofoz for asking.
Hoping to get this thread higher up, I’ll post the error as text.
```plaintext
Error: File to import not found or unreadable: .button.scss.
Parent style sheet: theme_field.scss
on line 1 of theme_field.scss
>> @import '.button';
```
---
### Author:  [@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")
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
```
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!
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 15, 2019, 4:05pm UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/7 "2019-04-15T16:05:33Z")
Multi-file SCSS is now supported natively by our theme system:
> [@Split up theme SCSS into multiple files](https://meta.discourse.org/t/splitting-up-theme-scss-into-multiple-files/115126):
>
> Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. [https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3](https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3) When creating a new theme with the [theme CLI](https://meta.discourse.org/t/beginners-guide-to-using-theme-creator-and-theme-cli-to-start-building-a-discourse-theme/108444), or sharing a theme [on github](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848), simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will b…
We hope to add similar functionality for JavaScript assets soon.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 15, 2019, 4:05pm UTC](https://meta.discourse.org/t/breaking-up-common-scss-into-multiple-files-in-components/110417/8 "2019-04-15T16:05:37Z")