Блог

Главная - Вопросы по программированию - Изменения, внесенные в пользовательский файл.scss в bootstrap, не работают

Изменения, внесенные в пользовательский файл.scss в bootstrap, не работают

#css #laravel #bootstrap-4 #sass #laravel-mix

#css #laravel #bootstrap-4 #sass #laravel-mix

Вопрос:

Я создал пользовательский файл.scss рядом с файлом scss, расположенным в модуле узла начальной загрузки на моем сервере laravel, содержимое файла

 /* 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, независимо от того, какой мой файл app.css, который создается из npm run dev, отображается в виде файла, который может видеть firefox, но все параметры выделены серым цветом и имеют строку черезони.
Могу ли я каким-либо образом изменить это, чтобы использовать точки останова сетки, которые я определил.
Спасибо

Комментарии:

1. Удалите свои custom.scss и переместите свои изменения / модификации в Laravel app.scss ?! » рядом с местоположением файла scss в модуле узла начальной загрузки» Я бы ничего не добавлял / не менял в этих папках «vendor», если есть обновление Bootstrap , скорее всего, ваш файл будет удален / удален

2. Есть ли другая копия / экземпляр / ссылка на bootstrap.css, включенная после app.css?

3. все учебные пособия, которые я видел для изменения точек останова начальной загрузки, находятся в файле custom.scss в модуле узла начальной загрузки, как мне заставить его работать в моем файле app.scss, потому что я пробовал это. Спасибо

4. @Zim да, я попытался поменять порядок, это загрузочный css-файл, я также включил файлы js

5. @Zim yh я только что заметил, включены ли также файлы js, и если да, то где они включены, на случай, если мне понадобится отредактировать их позже, потому что до сих пор я думал, что мне нужно их импортировать. Спасибо

Ответ №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";

И переопределение переменных sass в ./vars выглядит следующим образом…

 /* 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 .

Я изучу ваш метод, чтобы узнать, действительно ли он работает, однако метод, который я опубликовал, работает, если вы застряли.