Question

我在项目中关注 the instructions for overriding Bootstrap's colors，但它与我的工作流程冲突，并将〜130KB已编译/缩小的CSS膨胀为〜750KB。

我有一个文件colors.scss，用于设置主题的颜色，最后，我像这样覆盖了Bootstrap的原色：

$theme-colors: (
  "primary": $color-primary,
);
@import "node_modules/bootstrap/scss/bootstrap";

可正常使用。当我将colors.scss导入其他SCSS文件时，就会出现问题。当我的gulpfile.js编译代码时，它将Bootstrap导入每个导入colors.scss的SCSS文件中。

这是我的gulpfile.js供参考：

const gulp = require('gulp')
const sass = require('gulp-sass')
const concat = require('gulp-concat')
const order = require('gulp-order')

gulp.task('sass', () => gulp.src([
    'node_modules/bootstrap/scss/bootstrap.scss',
    'src/*.scss'
  ])
  .pipe(order([
    'node_modules/bootstrap/scss/bootstrap.scss',
    'src/colors.scss',
    'src/fonts',
    'src/body.scss',
    'src/breakpoints.scss',
    'src/elements.scss',
    'src/shadows.scss',
    'src/header.scss',
    'src/footer.scss',
    'src/class-overrides.scss'
  ], { base: './' }))
  .pipe(concat('style.css'))
  .pipe(gulp.dest('./dist/'))
)

其中许多文件引用colors.scss，从而导入Bootstrap。我的工作流程或它的设置方式是否有问题，或者如果我打算覆盖Bootstrap颜色，我应该只使用一个SCSS文件吗？

覆盖Bootstrap颜色会导致多次导入

0 个答案: