Breaking up common.scss into multiple files in components?

Support
1

Hi! I’m developing a component and can’t seem to @import additional styles from my MyTheme/common/common.scss, which contains the following:

@import '../assets/styles/handsfree';
@import '../assets/styles/splash';

My theme component directory looks like:

|-- 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
image.png885×260 7.25 KB

I’ve tried @importing with the following:

@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

2 Likes
2

@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.

10 Likes
4

Right now it’s impossible to import other files within a theme. As @sam said we are hoping to improve that soon :slight_smile:

8 Likes
5

Thank you @david and @sam :pray:
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.

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';
6

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:

<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://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!

7

Multi-file SCSS is now supported natively by our theme system:

We hope to add similar functionality for JavaScript assets soon.

8 Likes