Post by JazzBlueRT » Mon Sep 03, 2018 4:00 am

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?

------------------------------------------
Retro gifts, toys, games and accessories
https://www.retroactives.com/


Newbie

Posts

Joined
Mon Nov 06, 2017 1:34 am

Post by daniGo » 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;

http://www.gombac.si


Active Member

Posts

Joined
Wed Mar 20, 2013 4:49 pm
Location - Slovenia

Post by JazzBlueRT » Mon Sep 03, 2018 5:07 am

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.

------------------------------------------
Retro gifts, toys, games and accessories
https://www.retroactives.com/


Newbie

Posts

Joined
Mon Nov 06, 2017 1:34 am
Who is online

Users browsing this forum: No registered users and 27 guests