在 Bootstrap 5 中更改主按钮颜色

Change primary button color in Bootstrap 5

我希望使用 PHP 安装更改 Bootstrap 5 中主按钮 class 的颜色 SASS。

我最初通过 CDN 包含 Bootstrap,我知道我可以制作自定义 .css 文件。我知道我必须确保涵盖主要 class 的所有风格,但这是更改按钮颜色的相对快速简便的方法。

但这感觉很像 2010 年的样子,而且似乎有更易于升级的方式来实现这一点。由于 longer exists, it looks like the latest customization recommendations 将使用 SASS.

为了完成这个,我切换到 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 不包含任何 SCSS 文件,所以我现在觉得有点卡住了。这是我第一次使用 SASS,我似乎无法找到任何有关如何使用 PHP 执行此操作的信息。我还查看了其他资源以尝试将其拼凑起来:

SCSSPHP

SASS-Composer

这一切似乎让我更接近于使用 SASS 来自定义 bootstrap(我认为)。但是仅仅改变按钮的颜色也感觉像很多额外的东西。

我可以使用 SASS 和 PHP 来自定义按钮颜色吗?我应该采取什么步骤?

[我觉得这是一个意见问题。]

我个人没有在 Bootstrap 5 的代码库上尝试 PHPSASS,但我知道我在使用 NodeSASS 时遇到了几个问题。似乎 Bootstrap 使用(并且更喜欢)DartSASS 作为其来源。 Dart Sass is the primary implementation of Sass,还有一些其他 SASS 编译器无法处理的功能。

但是您还应该考虑为什么要使用基于 PHP 的 SCSS 编译器。

  • 如果要呈现动态 CSS 则需要完成大量工作,而像 Bootstrap 这样复杂的代码库可能太过分了每次点击都可以编译。对于这种方法,您最好使用 CSS 插件(仅通过更改覆盖 CDN 基础)。不要担心老派的想法...... HTML 无论如何都是 1989 年。

  • 如果它只编译一次(呈现可重用 CSS)那么你最好只使用 Bootstrap 代码库和 NPM 并创建 _variable.scss 文件为您自己的口味 Bootstrap。 Bootstrap 5 有一组丰富的文档,可以帮助您开始他们的 Customize Docs page. Start there ... And them move on to the bootstrap-npm-starter 项目以构建您自己的项目。