Do you mean the yarn run build command?

sage
1

Do you mean the yarn run build command?

Continuing the discussion from How the Heck? The Bootstrap 4 Beta thread:

2

Yes. Make sure you install the dependencies first by simply running yarn from the root of your theme’s directory.

Here is a list of Sage’s build commands:

3

Thanks. So I am trying to figure out a way to update the _variables.scss file when the theme’s customiser section is updated. And I think I should do a php exec with yarn run build but most of the hosting providers have that function disabled. Am I going in the wrong direction?

4

It’s definitely not normal usage of Sage and you are right that most hosting providers would not support this. I would recommend against what you are doing. Sure in some settings you might be able to get yarn run build working, but if the build fails? I would evaluate the necessity of this feature; how much usage will it actually get.

5

Ok. Do you have any recommendations to get past this issue? I tried to use the sass command sass main.scss main.css but it is not working maybe due to the different build process sage uses? Your help is highly appreciated. Thank you so much.

6

Haven’t gotten a lot into the customizer, but I’m guessing you wouldn’t normally have the cusomizer modify your theme files. Instead, your theme files would be set up to read and respond to the various customizer options. Probably this would be using one of the methods below, depending on the type of option in the customizer:

  1. Have your code respond to one choice in the customizer vs another - this could be conditional logic related to your templates (show this, don’t show that), having different CSS classes applied to different elements based on the choice, etc.
  2. Read the value of customizer options and generate additional CSS that is applied on top of your theme’s normal CSS. For example, this could be taking a color, font, etc., and dynamically generating the necessary CSS and then writing it to the theme’s header.

See here for examples: Complete Guide to the WordPress Theme Customizer - WPMU DEV

2 Likes
7

I was trying to use the power of scss and create a theme which colors can be updated from within the wp-admin and that was the reason I was leaning towards updating the _variables.scss file. Anyway, can you tell me if there is a command like sass for yarn to compile only the scss files? Unlike yarn run build which complies everything? Like an alternative to sass main.scss main.css? Thank you for the help :slight_smile:

8

If you want to ditch Sage’s build process and just use sass you can go ahead. What you need to know is that main.css does not live in the same directory as main.scss, so the command will need to reflect that. Also, the Sage build process hashes the built files and then tells WordPress the name of the hashed file, not main.css.

Reference this when you set the input and the output of the sass command:

themes/your-theme-name/   # → Root of your Sage based theme
├── dist/        
│   └── styles/           # → the main stylesheet lives in here.
└── resources/        
    └── assets/        
        └── styles/       # → main.scss lives in here

I can’t recommend any of this though.

9

I was using main.css for simplicity purpose. I know that the output css file is in a different location. Right now using sass is not an option for me due to this error Screenshot by Lightshot

It says:

Error: Can’t find stylesheet to import. @import “~bootstrap/scss/functions”;

10

This is a bad idea. Users should not be providing input that is executed by the server in this way. Additionally running the build process regularly on your production server with create additional (possibly difficult to manage) load, and will prevent the user from receiving useful feedback if that build process fails, hangs, or otherwise doesn’t work right.

If your desire is to allow for arbitrary color selection, you should consider CSS Custom Properties. They allow for “variables” in CSS which are interpreted by the client, not compiled, and enjoy extremely wide support. You could have WordPress output a short inline style defining the variable, which the rest of your CSS would then pick up, no asset generation required.

4 Likes
11

Thank you. The reason I was trying this because of the bootstrap sass. It offers some amazing and easy to use styles to be used with the scss file _variables.scss. And the only user to run that yarn build command would be the administrator user while updating the basic options through the wordpress customiser section. If you say it is a bad idea, i totally get it. I was eager to update _variables.scss and generate a new /dist/styles/main.css upon updation. As for using the predefined variables in the .css file of bootstrap I dont think its as comfortable and simple like working with _variables.scss

12

@ben Thanks for the clarification. I do use the themes default build process but I am trying to do this process through customizer.

  1. I update the primary and secondary colors through wordpress customizer
  2. Once the customizer is udpate I want the file /resources/assets/styles/custom/_variables.scss to be udpated and the build process starts. The yarn run build command

The other option was to use the bootstraps variables inline, but it did not work. Check the screenshot below.

bootstrap-variables
bootstrap-variables1393Ă—428 119 KB