add more configuration in bootstrap4-config.scss

Hi Guys,

in bootstrap4-config.scss

CSS

// @theme: blank @mixin box-shadow($shadow...) { @if $enable-shadows { box-shadow: $shadow; } } // Mixins Utilities @import '../vendors/bootstrap4/scss/mixins/breakpoints'; @import '../vendors/bootstrap4/scss/mixins/hover'; @import '../vendors/bootstrap4/scss/mixins/image'; @import '../vendors/bootstrap4/scss/mixins/resize'; @import '../vendors/bootstrap4/scss/mixins/screen-reader'; @import '../vendors/bootstrap4/scss/mixins/tab-focus'; @import '../vendors/bootstrap4/scss/mixins/reset-text'; @import '../vendors/bootstrap4/scss/mixins/text-hide'; @import '../vendors/bootstrap4/scss/mixins/reset-filter'; @import '../vendors/bootstrap4/scss/mixins/grid'; // Mixins Skins @import '../vendors/bootstrap4/scss/mixins/border-radius'; // Mixins Components @import '../vendors/bootstrap4/scss/mixins/nav-divider'; @import "../vendors/bootstrap4/scss/mixins/table-row"; // Components @import '../vendors/bootstrap4/scss/animation'; @import '../vendors/bootstrap4/scss/dropdown'; @import '../vendors/bootstrap4/scss/button-group'; @import '../vendors/bootstrap4/scss/tables'; // Components w/ JavaScript @import '../vendors/bootstrap4/scss/modal'; @import '../vendors/bootstrap4/scss/tooltip'; @import '../vendors/bootstrap4/scss/popover'; @import '../vendors/bootstrap4/scss/nav';

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

// @theme: blank   @mixin box-shadow($shadow...) {     @if $enable-shadows {         box-shadow: $shadow;     } }   // Mixins Utilities @import '../vendors/bootstrap4/scss/mixins/breakpoints'; @import '../vendors/bootstrap4/scss/mixins/hover'; @import '../vendors/bootstrap4/scss/mixins/image'; @import '../vendors/bootstrap4/scss/mixins/resize'; @import '../vendors/bootstrap4/scss/mixins/screen-reader'; @import '../vendors/bootstrap4/scss/mixins/tab-focus'; @import '../vendors/bootstrap4/scss/mixins/reset-text'; @import '../vendors/bootstrap4/scss/mixins/text-hide'; @import '../vendors/bootstrap4/scss/mixins/reset-filter'; @import '../vendors/bootstrap4/scss/mixins/grid';     // Mixins Skins @import '../vendors/bootstrap4/scss/mixins/border-radius';     // Mixins Components @import '../vendors/bootstrap4/scss/mixins/nav-divider'; @import "../vendors/bootstrap4/scss/mixins/table-row";     // Components @import '../vendors/bootstrap4/scss/animation'; @import '../vendors/bootstrap4/scss/dropdown'; @import '../vendors/bootstrap4/scss/button-group'; @import '../vendors/bootstrap4/scss/tables';     // Components w/ JavaScript @import '../vendors/bootstrap4/scss/modal'; @import '../vendors/bootstrap4/scss/tooltip'; @import '../vendors/bootstrap4/scss/popover'; @import '../vendors/bootstrap4/scss/nav';

It seems the bootstrap grid is not imported. so in style.css did not inlcude the definition like ‘col-lg-12’.

I have add a mapping

– ‘bundles/orofrontend/blank/scss/variables/bootstrap4-config.scss’: ‘bundles/rrifrontend/rri/scss/variables/bootstrap4-config.scss’
in my assets.yml. but still failed.

so anyone can advise what’s the proper way to override CSS? especially in my bundle, I have to refer to vendor folder in Oro/Bundle/FrontendBundle/Resources/public/blank/scss.

Topic

[Andrey YatsenkoModerator]

Hi pauldeng,

Your config looks ok, make sure you cleared the cache after changes, and make sure you placed assets.yml in the right place, here is an example with the same customization https://github.com/oroinc/orocommerce/blob/master/src/Oro/Bundle/CustomThemeBundle/Resources/views/layouts/custom/config/assets.yml

Also there is another way to override – you can disable our config at all by adding
bundles/orofrontend/blank/scss/variables/bootstrap4-variables-config.scss: ~
and then load the whole bootstrap.

• This reply was modified 5 years, 9 months ago by  Andrey Yatsenko.

[Author]

Replies