在引导程序中对 custom.scss 文件所做的更改不起作用

Question

我在我的 laravel 服务器上的引导节点模块中的 scss 文件位置旁边创建了一个 custom.scss 文件，文件的内容是

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/_variables";
//@import "~bootstrap/scss/mixins/_breakpoints";

/* make changes to the !default Bootstrap variables */    
$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

/* finally, import Bootstrap to set the changes! */
@import "~bootstrap";

我试图实现的是更改引导程序 4 断点，但是仍然从 _root.scss 加载断点，而我从 npm run dev 生成的 app.css 文件显示为 firefox 可以看到的文件但是所有的选项都是灰色的，并且有一条线穿过它们。 有什么办法可以改变它以使用我定义的网格断点。 谢谢

Answer 1

我觉得这个问题很有趣，因为我没有意识到你的方法可能真的有效。我通常如何处理引导变量覆盖是这样的......

// make font sizes responsive
$enable-responsive-font-sizes: true;

// import bootstrap initial sass vendors
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// remove colors from bs color var maps
$grays: map-remove($grays, "100","200","300","400","500","600","700","800","900");
$theme-colors: map-remove($theme-colors, "primary","secondary","success","danger","warning","info","light","dark");
$colors: map-remove($colors, "blue","indigo","purple","pink","red","orange","yellow","green","teal","cyan","white","gray","gray-dark");

// @debug $colors;

// get my var overrides sass
@import "./vars";

// finish loading rest of bs sass lib with my var and color map changes applied
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
//@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
//@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
//@import "~bootstrap/scss/print";

在 ./vars 中覆盖 sass 变量看起来像这样......

/* grid breakpoints
-------------------------------------------------- */

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Extra small screen / phone
  is: 350px,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

我一直认为 @import "~bootstrap"; 在 sass 变量覆盖之后只会重新导入 bootstrap/scss/variables 再次将我的所有自定义变量覆盖重置为默认的 bootstrap/scss/variables。

我会研究你的方法，看看它是否真的有效，但是如果你被卡住了，我发布的方法会有效。