# Do you mean the yarn run build command? **URL:** https://discourse.roots.io/t/do-you-mean-the-yarn-run-build-command/13012 **Category:** sage **Created:** 2018-07-24T06:37:19Z **Posts:** 12 ## Post 1 by @ahmad — 2018-07-24T06:37:19Z Do you mean the yarn run build command? Continuing the discussion from [How the Heck? The Bootstrap 4 Beta thread](https://discourse.roots.io/t/how-the-heck-the-bootstrap-4-beta-thread/10198/30): > [@How the Heck? The Bootstrap 4 Beta thread](https://discourse.roots.io/t/how-the-heck-the-bootstrap-4-beta-thread/10198/30): > > You’ll need to use the build process included with Sage to compile assets --- ## Post 2 by @knowler — 2018-07-24T07:03:15Z 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: > **[Theme Development and Building | Sage Documentation | Roots](https://roots.io/sage/docs/theme-development-and-building/#available-build-commands)** > > Sage uses npm, Webpack, Browsersync, and other modern front-end tools for theme development. Stylesheets and JavaScript files are automatically linted. --- ## Post 3 by @ahmad — 2018-07-24T07:30:23Z 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? --- ## Post 4 by @knowler — 2018-07-24T07:58:25Z > [@ahmad](#): > > 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? 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. --- ## Post 5 by @ahmad — 2018-07-24T08:09:16Z 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. --- ## Post 6 by @mmirus — 2018-07-24T14:01:22Z > [@ahmad](#): > > I am trying to figure out a way to update the `_variables.scss` file when the theme’s customiser section is updated. 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](https://premium.wpmudev.org/blog/wordpress-theme-customizer-guide/) --- ## Post 7 by @ahmad — 2018-07-24T16:49:45Z 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: --- ## Post 8 by @knowler — 2018-07-24T17:25:49Z 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. --- ## Post 9 by @ahmad — 2018-07-24T17:33:42Z 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](https://prnt.sc/ka39u1) It says: > Error: Can’t find stylesheet to import. @import “~bootstrap/scss/functions”; --- ## Post 10 by @alwaysblank — 2018-07-24T17:51:37Z > [@ahmad](#): > > 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. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). 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. --- ## Post 11 by @ahmad — 2018-07-25T21:08:00Z 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 --- ## Post 12 by @ahmad — 2018-07-29T18:39:55Z @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](https://discourse.roots.io/uploads/default/original/2X/0/0faee38659f7a8b3aedb34f5f2200bb6c1b70fa2.png)