I can edit main.scss, watch…

redshoes Avatar

I can edit main.scss, watch runs and it all works, except options.
I change color vars – $red: for example, i change breakpoints, $grid-breakpoints, but no any change i see in the theme.

Unresolved Resolved

5 responses

  1. them.es Avatar

    Hi redshoes!

    The Gulp watch task should work out of the box. Could you make sure that you have read+write access to /assets/css/main.css. You could also try to delete the main.css file and recompile it from the SASS source.

    Hope this helps…

    1. redshoes Avatar

      Well, i’m not saying, that gulp is not working. It does it’s job!
      The bug is that i can’t change these global vars, like breakpoints and colors. I can successfully create my own ones, and it works (as i already did for the colors), and thank G-d, i do not really need to change breakpoints in this project, but as for the future…

      1. them.es Avatar

        Colors can be changed by defining the $colors variable: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L46-L61

        Grid breakpoints can be modified via the $grid-breakpoints variable as pointed out in the official Bootstrap repo: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L285-L292

        But I guess you already know that. So please double check that you are adding these variables in your main.scss file before any @import “../node_modules/bootstrap/scss/bootstrap”; statements.

        This has been tested locally by us and confirmed to be working. If you still don’t manage to change the grid breakpoints, would it be possible to share your main.scss file? You can use the uploader in the sidebar to share it as a ZIP file.

        1. seven6 Avatar

          I’m confused as Gulp only seems to recognize main.scss and changing any files in node_modules/bootstrap/scss aren’t recognized. I can make changes in node_modules/bootstrap/scss but then I have to change something in main.scss to get Gulp to compile. This seems to be an incredibly slow way to develop. Am I missing a path in my gulpfile.js? Or am I supposed to run npm install in node_modules/bootstrap/ ?


          1. them.es Avatar

            Modifying NPM source files is a bad idea. Anytime you update your NPM dependencies all changes will be lost.

            The correct approach is to override the Bootstrap variables as stated in the previous comment – preferably in main.scss
            Documentation: https://getbootstrap.com/docs/5.0/customize/sass/#variable-defaults

            Our Gulp watch command only gets triggered when main.scss or main.js gets modified but feel free to add more paths in your local gulpfile.js

Leave a Reply