5

We're currently working on a brand new Magento 2 theme based on the Snowdog Blank Sass parent. After a lot of research we've figured out a ton of cool features and insights on how to build a solid and extendable theme package. The thing we are not so sure about is how to make use of external frameworks and libraries like for example Bootstrap3 or Font Awesome.

We came across several cool ideas based on Bower, which can load packages from all over the place and include them inside the theme. The thing is, where do we put them and how is it all gonna work with Sass compiling. We pointed the Bower directory param to the //lib folder and put a git ignore in the root of the theme. Based on this idea, we can for example @import those into our _styles.scss file and make use of all the given mixins and variables.

In the end, I'm not totally sure if this is the way Magento wants it. I mean, the jQuery library is put inside the /lib/web folder which could act as a vendor folder for Bower. So in the same time I've explained it inside this topic, we've also tried it in practice and put Bootstrap-sass into the lib/web folder. Unfortunately this wont work because the static deployment will get stuck within the process mainly because it just doesn't know how to handle .scss files?

I hope some of you can help us find the right way / position of where to put all those libraries and framework. Bower can help allot if we get the right way.

1 Answer 1

0

As long as the Sass compiler (whether it be Magento/Gulp/Grunt) can see the framework it doesn't matter too much.

One thing to note is when using Magento's compiler (Sass or Less) I don't think you can import from /lib with @import "../../../../lib". It's intentionally restricted due to security concerns.

I have added Bootstrap in to two themes so far, one using a Magento theme (Luma) and one using Snowdog's blank theme (and Frontools to compile). This is how I did it.

Blank Sass theme

When using Snowdog's blank theme I add my third party frameworks/libraries into /app/design/frontend/VENDOR/THEME/styles/vendor. Then they can be imported the same way as a none-Magento project.

Standard Magento themes

When working with the default Magento compilation (not using Gulp/Grunt) I add the third party frameworks/libraries to /app/design/frontend/VENDOR/THEME/web/css/vendor/. It can then be imported as normal.

@import 'vendor/bootstrap/_bootstrap.less';

I haven't used Bower with Magento 2 but I can't see it being any different, just ensure Bower install the libraries/frameworks to styles/vendor so you can easily import them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.