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

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

我在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";

我试图实现的是更改bootstrap 4断点，但是仍然从_root.scss加载断点，但是从npm run dev生成的app.css文件却显示为firefox可以看到的文件但所有选项均显示为灰色，并在其中有一行。 有什么办法可以更改此设置以使用我定义的网格断点。 谢谢

解决方法

我发现这个问题很有趣，因为我没有意识到您的方法可能确实有效。我通常如何处理bootstrap变量覆盖是这样的...

// 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。

我将调查您的方法是否确实有效，但是如果您遇到问题，我发布的方法仍然有效。