Bootstrap SASS

I am new to SASS and want to learn how to use SASS with Opencart 3. I installed BS 4 using composer and that is now in storage/vendor which is outside the web root.

I see catalog/controller/startup/sass.php
looks for
catalog/view/theme/theme_dir/stylesheet/sass/_bootstrap.scss

I presume this compiles the directives in _bootstrap.scss and saves the output to the cache.

How to I make this import the files

Does @import directive used here require the bootstrap scss files to be in the web path?

Do I have to copy the storage/vendor/twbs/bootstrap/scss to catalog/view/theme/theme_dir/stylesheet/sass? Do they have to be at the same directory level?

What should my _bootstrap.scss look like?

I want to do this the hard way instead of overriding the bootstrap css classes in my themes stylesheet.css .

What gets referenced in the themes header file?

You can't use BS 4 with Opencart because BS4 use Autoprefixer when compile sass and Opencart sass compiler does not have this feature.

BS4 dist code:
OC3 sass compiler dist code:

daniGo wrote: ↑

Mon Sep 03, 2018 4:38 am

You can't use BS 4 with Opencart because BS4 use Autoprefixer when compile sass and Opencart sass compiler does not have this feature.

BS4 dist code:

Code: Select all

display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

OC3 sass compiler dist code:

Code: Select all

display: flex;
flex-wrap: wrap;

php composer.phar remove twbs/bootstrap
php composer.phar require twbs/bootstrap:3.3.7


Thank you. So how do I make this work with BS3.

I see there is no scss only less. How do I make this work with less?

Ok, I found twbs/bootstrap-sass back to working with sass.