# 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:** Product 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:** 1

<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 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")

</div>

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:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/2/12f5a4dfb53692e1d5825a00adf9b7bd42fcf14e.png)

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

---

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