CSSPreprocessor help needed (Bootstrap)

[brentnl]

Hi,

I want to add bootstrap 4.5 to my CMS template with the possibility to theme some variables with SCSS. But I can't get it to work. I've downloaded the source files and uploaded them to /assets/bootstrap (So bootstrap.scss is located at /assets/bootstrap/scss/bootstrap.scss).

Then I've installed CSSPreprocessor 3.0-beta3, filled in 'assets/bootstrap/scss' as option for the directory which contains the LESS/SASS files which have to be included in the compilation. As final step I've made a stylesheet for my design, with the following code;

Code: Select all

$grid-breakpoints: (
  xs: 375px,
  sm: 640px,
  md: 768px,
  lg: 980px,
  xl: 1800px
);

@import "[[root_url]]/assets/bootstrap/scss/bootstrap.scss";

But no CSS got compiled, the sheet stays empty, so what am I doing wrong?

[deactivated010521]

Oops this is the English Forum... Google Translate to the rescue:


The CSSPreprocesssorModule is written for CMSMS 2.3. Perfect use case for hooks but this functionality is not implemented in CMSMS 2.2.

No idea if hook functionality will ever be implemented in a stable CMSMS version. They don't seem to want to say goodbye to the current Event Manager. This is just a personal observation not an official one.

Underwater, CSSPreProcessor uses Sass Dart, you can install it separately and address it directly via the CLI.

I use LibSass myself, a Sass implementation written in C. This one also has a CLI and works perfectly izm with a JavaScript taskrunner.

http://www.sass-lang.com/documentation/cli/dart-sass

https://sass-lang.com/libsass

##

De CSSPreprocesssorModule is geschreven voor CMSMS 2.3. Perfecte use case for hooks maar deze functionaliteit is niet geimplementeerd in CMSMS 2.2.

Geen idee of hook functionaliteit ooit geimplementeerd gaat worden in een stabiele CMSMS versie. Men lijkt geen afscheid te willen nemen van de huidige Event Manager. Dit is slechts een persoonlijke observatie geen officiele verklaring.

Onderwater maakt CSSPreProcessor gebruik van Sass Dart mogelijk kan je deze los installeren en direct aanspreken via de CLI.

Ik maak zelf gebruik van LibSass een Sass implementatie geschreven in C. Deze heeft ook een CLI en werk perfect izm met een JavaScript taskrunner.

[brentnl]

Thanks for your answer Arnoud. If I understand you correct it isn't possible to compile bootstrap on a CMSMS 2.2.x website with CSSPreprocessor? Is your mentioned solution with LibSass the easiest solution for someone who only has knowledge of HTML/CSS, and only can read Javascript a bit?

The only thing I want to achieve is a version of bootstrap (4.5) , with a wider GRID then default, but never used bootstrap other than with linking the CDN-version. Never used things like NODE, NPM etc. Currently I'm watching a video about compiling bootstrap customization locally... it sounds not that hard, and maybe it's easier for me to just compile it once locally, and then upload compiled css to my host?

But it's also possible to run NODE/NPM directly from my webhost (Antagonist) right? Or does it need certain requirements to do so?

[deactivated010521]

The easiest solution would be to install an older CSSPreProcessor module version that works under CMSMS 2.2, maybe one without -beta. Did not check older CSSPreProcessor versions in combination with 2.2 so don't know if and how that works.

I went with node/npm myself and think this tooling is very easy. Yes, you have to learn a bit if you go the node/npm route, but these tools are very flexible and industry standard so transferable to other projects and environments.

Compiling Sass to CSS once is possibile but it takes away the flexibility and preferred way of working with Sass files.

With Sass you can structure your projects, configure, tweak add or remove functionality. If you only need the grid system or a few components you only add these, when a new bootstrap version arrives and you only have the CSS files with a lot of adjustments it is impossible to upgrade.

The video you have linked only explains how to theme Bootstrap. It does not tell anything about compiling Sass to CSS maybe that is in another episode otherwise lookup documentation on npm scripts or a task runner like Gulp or the official Bootstrap documentation:

https://getbootstrap.com/docs/4.5/getti ... ild-tools/

Code: Select all

- install nodejs + npm
- download bootstrap package.json
- npm install 
- prepare your sass files / theme
- npm run css
- profit !!!!

You can run npm scripts locally or on your webserver when Antagonist allows installation and executing shell commands and has node/npm support.