jgangso jgangso - 4 months ago 20
Sass (Sass) Question

How to disable certain component from Bootstrap on Laravel

One would imagine I'm not the only one trying to achieve this, so I was surprised that I couldn't find an answer in Google. I'm googling with wrong keywords perhaps..

I'm looking for a way to disable the Glyphicons component from Bootstrap on my Laravel application. I'm using the SASS version of Bootstrap.

Only way I can imagine is to comment out this line

@import "bootstrap/glyphicons";
inside
node_modules/bootsrap-sass/assets/stylesheets/_bootstrap.scss
but if I understood correct, that would be an bad idea since the content of that directory will be overwritten by updates on the bootstrap module. Am I right?

How else could I prevent the SASS processor from importing the Glyphicons?

Would it be a lasting solution to take a copy of the
_bootstrap.scss
file to my
resources/assets/sass/
, and there comment out the Glyphicon-line and then reference that file from my
app.scss
?

As this is a long-term project, I want to be careful with the architecture...

Answer

Ended up solving this the way I suggested in the post:

  1. Copy _bootstrap.scss from node_modules/bootstrap-sass/assets/stylesheet to resources/assets/sass/
  2. @import the copied file to app.scss instead of the one in the node_modules directory.
  3. Comment out the components that are not needed, such as Glyphicons.

I'm still interested to hear of potential downsides this solution might have, but as far as I can see, this shouldn't require extra maintenance or duplicate work in the future.

P.S. If anyone knows a way to add node_modules/bootstrap-sass/assets/stylesheets/ to the Sass load path in Laravel environment, it would be helpful. For some reason I didn't get this working: https://laracasts.com/discuss/channels/general-discussion/setting-include-path-for-sass-in-elixir