覆盖Bootstrap CSS的最有效方法是什么？

Question

I'm using Opencart for a E-Commerce site for my company. The Opencart developer is working on V2.0 which will incorporate Bootstrap as the default styling.

My plan was to put a link in my header file on the next line BELOW the link to bootstrap stylesheet example:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/override.css" />

I was planning on using LESS to compile into override.css and only change small parts of the Bootstrap less to meet my needs. For example, I was planning on only including the variables.less from bootstrap along with buttons.less and layout.less. I'd then compile those modified files into override.css to get my personalized styles. However, the more I think about it, I realize I'd need to include all the LESS from Bootstrap. This would make my override.css essentially the same as bootstrap.css (with the exception of the changes I make for my styling).

This essentially defeats the purpose of having an override. Is there a way to not need to include ALL the bootstrap less, just the parts that I want in the override?

People may be wondering why I don't just modify the bootstrap.css file. My thought is that if I do modify the bootstrap.css file all my changes will be overwritten if I go to upgrade (or if the Opencart developer upgrades) bootstrap in the future.

Any advise is much appreciated!

Thanks!

DS-MATT

Answer 1

Why don't you keep an overwrite.css to yourself, while presenting compiled bootstrap.css + override.css to the end user? That way you can easily update your bootstrap.css in the future and easily maintain the overrides themselves.