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] 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

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

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

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

Multi-file SCSS is now supported natively by our theme system: [image] Split up theme SCSS into multiple files Developer Guides 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 When creating a new theme with the theme CLI, or sharing a theme on github, 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.

Breaking up common.scss into multiple files in components?

Product Support

david (David Taylor) March 1, 2019, 11:26am 4

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

Topic		Replies	Views
Split up theme SCSS into multiple files Developer Guides how-to	12	4992	January 18, 2024
Feature proposal: Import user-defined SCSS files UX	4	1417	August 1, 2018
Structure of themes and theme components Developer Guides reference , theme-guides	0	30028	April 12, 2017
Theme stylesheets: Can't use the same filename.scss in different folders Development	1	381	July 26, 2023
How do the `@import`'s work with SCSS? Development	14	993	March 26, 2024

Breaking up common.scss into multiple files in components?

Related topics