theme.compiled.css empty

Bootstrap Studio Help
1

Hello, I am new to sass, but I see a lot of potential for creating my own themes.

Could some one explain why i get an empty theme.compiled.css?

Maybe someone can show me for instance how to setup a project with a main theme.scss which imports

  • _variables.scss (where i can override colors for instance)
  • bootstrap.scss
  • _styles.scss (with additional styles)

Thanks in advance

2

What I did was I searched online for various things regarding SASS, SCSS. What I came to is doing the following.

You have to have a main file that does not start with an underscore "_". SASS files that start with an underscore I believe are considered not rendered files they consist of your variables/mixins etc..

You @import the underscored files into a non-underscored file for the resulting outcome to then be rendered.

For instance you should create a non-underscored file such as

theme.scss

In there you do an @import "underscored-file-name-without-the-underscore-and-extension" so the contents of your theme.scss file looks like.

@import "variables"
@import "styles"

Then you @import your _styles.scss file in the theme.scss file so that it will then render your CSS rules.

This makes your variables in the _variables.scss usable in the theme.scss file prior to the loading of your _styles.scss where you actually use the variable.

So create:

theme.scss

@import "variables"
@import "styles"

Then in _variables.scss you have

$color--blue: blue;

Then in _styles.scss you have

h1 {
 color: $color--blue;
}

Which the resulting compiled theme.compiled.css file will contain.

h1 {
 color: blue;
}

This is still all new to me as well, and I did a bunch of searches and looked at guides etc... ways to use SASS etc..

Unfortunately, I can't seem to find some of the main ones I had been looking at the last few weeks, but this is one that I tend to come back to from time to time https://css-tricks.com/sass-style-guide/

Saj

3

@nl_jojo welcome to the forums and thanks for starting this thread! The app doesn't expose the built-in Bootstrap framework's scss file. We thought about ways to do this, but decided that giving people the option of editing the built-in bootstrap is just asking for trouble. Instead, you can develop a theme externally, and import it as a custom theme. You can then switch to it from the Settings dialog. The SASS in the app is only there to help you organize your code better. Of course, if it is too limiting we will find ways to make it work better for you.

@Saj, amazing work! This is a wonderful getting started guide for sass :)