Breaking up common.scss into multiple files in components?

Product Support

AI-generated summary

Breaking up common.scss into multiple files in components?

A discussion about the limitations of importing additional styles from common.scss in Discourse theme components. labofoz shares an issue where importing styles from common.scss results in an error. david and sam confirm that importing files within a theme is currently impossible but plans are underway to improve this.

julienbourdeau shares a similar issue and provides an error message. labofoz implements a temporary workaround using Webpack to compile scripts and SCSS into one file, which is then injected inline using a template file.

In an update, david announces that multi-file SCSS is now supported natively by the Discourse theme system, with plans to add similar functionality for JavaScript assets soon.

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
image885×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

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

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:

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.