时间戳

首页 > 解决方案 > Bootstrap 如何导入我的自定义变量而不是可怕地增加编译时间？

css - Bootstrap 如何导入我的自定义变量而不是可怕地增加编译时间？

问题描述

我想覆盖引导程序的变量，然后在我的 scss 文件中使用它们。我使用 webpack、sass、css-、sass-、miniCssExtract-loaders 和 bootstrap。我有两个文件：

  1. 索引.scss
@import '~bootstrap/scss/functions';

$primary: #8706f0;
$secondary: #141b41;
$light: #e6e5e8;

@import '~bootstrap/scss/bootstrap';

html,
body,
#root {
  height: 100%;
}

body {
  background-color: $primary;
}
  1. login.module.scss
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

.login {
  background: $primary;
}

在文件 1 中，变量被覆盖。在文件 2 中，我有默认的引导变量。编译时间很好。如果我将文件 2 更改为：

@import 'index';

.login {
  background: $primary;
}

一切正常，变量被覆盖。但是编译时间从 <1s 增加到 4-5 秒，我认为这是因为 bootstrap.scss 是第二次编译的（首先在索引中，然后在登录中）。

我想知道什么是让我的变量在其他文件中可访问的最佳方式，并且一次有一个体面的编译时间。我知道我可以使用自己的变量（如“_variables.scss”）创建另一个文件并导入它，但我更希望将所有内容都放在引导程序中。

或者有什么办法告诉 webpack 不要再次编译整个引导程序？Idk 我正在努力寻找最好的方法，但没有一个能让我满意......

标签： csstwitter-bootstrapwebpacksass

解决方案

好的，我找到了一种方法。如果有人会到达那里，我会留下答案。因此，要将所有这些放在一起，您应该：

  1. 使用您的覆盖创建 _variables.scss：
@import '~bootstrap/scss/_functions.scss';

$primary: #8706f0;
$secondary: #141b41;
$light: #e6e5e8;

@import '~bootstrap/scss/_variables.scss';
  1. 创建 _custom.scss（类似于引导设置文件）：
@import './variables.scss';
@import '~bootstrap/scss/bootstrap.scss';
  1. 创建 index.scss 并将其导入应用程序的根目录（这是 webpack 唯一一次编译整个引导程序）：
@import 'assets/scss/_custom.scss';

//...
  1. login.module.scss - 你也可以访问你覆盖的变量和其余的 bs 变量，这样做：
@import 'assets/scss/_variables.scss';

.login {
  background: $primary;
  height: 100%;
  width: 100%;
}

现在编译时间很好，你有自己的变量。我认为还有其他方法可以实现这一目标，但为什么不分享自己的想法：D

当然，您可以只导入必要的模块，而不是在 _custom 导入整个引导程序。

推荐阅读