1

I'm looking to change the color of the primary button class in Bootstrap 5 with SASS using a PHP installation.

I had initially included Bootstrap via CDN with the knowledge that I can make a custom .css file. I know I have to make sure to cover all flavors of the primary class, but it is a relatively quick and easy way to change the button color.

But that feels very 2010, and there seem to be more upgrade-friendly ways to accomplish this. Since a customized bootstrap longer exists, it looks like the latest customization recommendations are to use SASS.

To accomplish this, I switched to the composer installation of bootstrap in the hope that would provide the the necessary SASS files, and from there I could add a customization and then compile for my installation. But the composer package doesn't include any SCSS files, so I now feel a bit stuck. This is my first time using SASS, and I can't seem to find anything on how to do this with PHP. I've also looked at other resources to try and piece it together:

SCSSPHP

SASS-Composer

This all seems like it gets me a bit closer to using SASS to customize bootstrap (I think). But it also feels like a lot of extra stuff to just change the color of the button.

Can I use SASS with PHP to customize the button color? What steps should I take?

AnthonyRPF
  • 13
  • 3

1 Answers1

0

[I feel like this is an opinion question.]

I've personally not tried PHPSASS on Bootstrap 5's code base, but I know I had several issues when using NodeSASS. Seems Bootstrap uses (and prefers) DartSASS for its source. Dart Sass is the primary implementation of Sass, and there are some features that other SASS compilers cannot handle.

But you should also consider why you'd want to use a PHP based SCSS compiler.

  • If it's to render dynamic CSS then there is a significant amount of work that needs to be done, and a code base as complex as Bootstrap may just be too large to compile on every hit. For this approach you'd be better of with your CSS plugin (overriding the CDN base with just the changes). And don't worry about old-school thinking ... HTML is so 1989 anyway.

  • If it's to compile just once (rendering reusable CSS) then you'd be better off just using the Bootstrap codebase with NPM and creating a variant of the _variable.scss file for your own flavour of Bootstrap. Bootstrap 5 has a rich set of documents that can get you started on their Customize Docs page. Start there ... And them move on to the bootstrap-npm-starter project to build your own.