如何优化引导程序以避免呈现未使用的CSS代码 [英] How to optimise bootstrap to avoid rendering unused css code

问题描述

我们正在vue.js中开发一个MVP，我们决定使用bootstrap使元素样式保持一致.

We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way.

现在，我们开始将皮肤/主题添加到我们的单页应用程序中，并且发现页面上呈现的CSS出现问题.

Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page.

我们通过使用更高特异性的css选择器成功地覆盖了样式，但是我们希望通过删除未使用的基本"引导css代码来优化在浏览器中呈现的输出代码.

We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.

问题:

详细信息:

1. 引导程序会加载其自己的_buttons.scss文件
2. 在引导程序之后，我们正在加载自己的主题" _buttons.scss文件，并且设法使CSS具有更高的特异性.
3. 我们运行sass代码编译器(在node-sass上)
4. 输出css包含 BOTH (BOTH)样式和按钮的主题样式. (例如，请参见以下屏幕截图)

1. Bootstrap loads its own _buttons.scss file
2. We are loading our own "theme" _buttons.scss file after bootstrap's one and we managed to have our css with higher specificity.
3. We run the sass code compiler (on node-sass)
4. The output css contains BOTH the bootstrap style and our own themed style for the buttons. (As an example, see the following screenshot)

您会看到我们自己的按钮样式已按预期应用，但我们仍然沿用了引导程序的原始样式.

As you can see our own button style is applied as intended but we still carry over the bootstrap original style.

我们只希望在浏览器中呈现我们的样式.

更新:

我正在使用的用户界面直接使用了一些自举类，并且显然使用了某些特定于我们自己的应用程序的类.

The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.

有时这些类对于覆盖引导程序默认样式是必需的.
我们不仅需要覆盖颜色(可通过_variables.scss进行自定义)，还需要覆盖其他一些CSS属性.

Sometimes these classes are necessary to override the bootstrap default styles.
We need to override not only the colours (which are customisable through the _variables.scss), but also some other css attributes.

我们发现自己在浏览器中呈现的重复css代码方面苦苦挣扎，其中应用了我们自己的样式，还使用了默认的引导程序生成样式，因为它的特异性很低，因此将永远不会应用.

We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.

我想知道是否有一种方法可以避免编译不需要在浏览器中呈现的Sass代码，同时避免触摸" ./node_modules/中的引导程序代码./em>

I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in ./node_modules/.

推荐答案

这是您覆盖Bootstrap(4.x)默认设置的方式.

Here's how you override Bootstrap (4.x) defaults.

首先，在 bootstrap.scss 内部查看，您可以在其中看到如何逐个组件地构建框架.如果愿意，可以注释掉不需要的可选组件，以减小Boostrap的尺寸.但是现在不要这样做.

First, look inside bootstrap.scss where you can see how the framework is built, component by component. You could, if you like, comment out optional components you don't need, to downsize Boostrap. But don't do that right now.

接下来，查看 _variables.scss .略过此文件，应该很清楚，这里定义了所有可自定义的Bootstrap样式，包括颜色.因此，您可以使自定义颜色不仅适用于按钮，而且适用于整个框架.同样，您可以立即在此处开始更改所需的变量...但是不要这样做，因为有最佳实践.

Next, look inside _variables.scss. Skim through this file and it should be clear that all customisable Bootstrap styles are defined here, including colors. Thus you can have your custom colors apply not just for buttons but throughout the whole framework. Again, you could start changing the variables you want here right now... but don't, for there is a Best Practice.

创建一个新的源文件，而不是编辑原始源，我们将其命名为 myproject.scss ，而不是Bootstrap源文件夹.通过将所有更改分开，我们使将来的所有Bootstrap升级都变得容易.

Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy.

现在，您可以开始复制要更改的变量.请注意， _variables.scss 中的变量具有!default标志，这意味着它们可以在其他位置覆盖.例如，如果要使用其他辅助颜色，则会将其定义为$secondary，然后将其添加到 myproject.scss 中，并使用新值:

Now you can start copying variables you want to change. Note that variables in _variables.scss have the !default flag, which means they can be overridden elsewhere. For example if you want a different secondary color, you'll find it defined as $secondary, and so add it to myproject.scss with a new value:

$secondary: #dd5679;

根据需要添加尽可能多的变量替代.

Add as many variable overrides as you want.

然后，将Bootstrap导入文件.还可以批发 bootstrap.scss :

After that, import Bootstrap into the file. EITHER take bootstrap.scss wholesale:

@import "relative/path/to/bootstrap/bootstrap";

或复制粘贴 bootstrap.scss 的内容，更新路径名，并注释掉不需要的组件:

OR copy-paste the contents of bootstrap.scss, update the pathnames, and comment out the components you don't want:

@import "relative/path/to/bootstrap/functions";
@import "relative/path/to/bootstrap/variables";
@import "relative/path/to/bootstrap/mixins";
...
// @import "relative/path/to/bootstrap/popover";
// @import "relative/path/to/bootstrap/carousel";
@import "relative/path/to/bootstrap/utilities";
@import "relative/path/to/bootstrap/print";

前3个输入分别是函数"，变量"和变量".和"mixins"是核心，而不是可选组件；不要排除它们.

The first 3 imports, "functions", "variables" and "mixins" are core and not optional components; don't exclude them.

之后，添加您自己的样式.如果您的数量很多，请将它们组织到自己的部分文件中，例如 _mybuttons.scss (以下划线开头的部分文件的名称)，然后导入它们.

After that, add your own styles. If you have a significant amount, organise them into their own partial files e.g. _mybuttons.scss (start names of partial files with an underscore), and import them.

@import "mybuttons";

您的自定义Bootstrap源文件现已准备就绪.

Your custom Bootstrap source file is now ready.

要生成的 myproject.css 文件是您要加载的而不是原始Bootstrap CSS文件的.

The resulting myproject.css file is what you want to load instead of the original Bootstrap CSS file.

这篇关于如何优化引导程序以避免呈现未使用的CSS代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！