Bootstrap mit sass und grunt

Für unseren Webshop möchte ich langfristig auf eine neue Bootstrapversion umstellen und ein neues Template bauen. Ich arbeite zwar schon länger mit Grunt aber nur in Teilbereichen. Für die neuen Projekte möchte ich das mit npm noch etwas besser automatisieren. Vor allem das manuelle Downloaden und Anpassen der Abhängigkeiten soll entfallen.

Basis für meine Notizen sind dieses und dieses Dokument und wie immer gilt. Das sind meine Notizen und kein Bulletproof Tutorial

Wir starten also im Rootverzeichnis des Webprojekt und initialisieren unseren npm

npm init vi package.json “dependencies”: { “bootstrap”: “^4.2.1”, “jquery”: “^3.3.1”, “popper.js”: “^1.14.6” }

Damit haben wir eine Art “Inhaltsverzeichnis” eröffnet auf dessen Basis der npm Packete installiert. Jetzt kann ich einfach Boostrap mit allen Abhängigkeiten installieren.

  npm install       
  shop-rusticus-template@1.0.0 /home/hbauer/Dokumente/rusticus/shop/shoproot/templates/tpl_modified
  ├── bootstrap@4.3.1
  ├── jquery@3.3.1
  └── popper.js@1.14.7

  ls node_modules
  bootstrap  jquery  popper.js

Zu Beginn brauche ich erst mal nur die Werkzeuge die ich zum zusammenstellen der Bootstrap CSS Dateien aus den sass Quellen benötige.

 sudo npm install grunt -save-dev
 sudo npm install grunt-contrib-sass -save-dev
 sudo npm install grunt-contrib-watch -save-dev

Dann erstelle ich die Steuerungsdatei für Grunt. Hier werden erst einmal nur die saas Elemente eingebaut und getestet. Die anderen Grunt Funktionen übernehme ich von meinen alten Beispielen. Hier geht es mir vor allem um das Zusammenspiel der Bootstrap Elemente die über npm installiert werden und meine eigenen Notwendigen Anpassungen.

   module.exports = function(grunt) {
       grunt.initConfig({
           sass: {
               dev: {
                   options: { style: 'expanded',
                             loadPath: ['node_modules/bootstrap/scss','sass']},  //Wichtig
                   files: { 'mystyle.css': 'sass/mystyle.scss' }
                   },
               dist: {
                   options: { style: 'compressed',
                       loadPath: 'node_modules/bootstrap/scss' },
                   files: {
                       'mystyle.css': 'sass/mystyle.scss' }
               }
           },
           watch: {
               sass: {
                   files: 'sass/*.scss',
                   tasks: ['sass:dev']  } }
       });
       grunt.loadNpmTasks('grunt-contrib-sass');
       grunt.loadNpmTasks('grunt-contrib-watch');
       grunt.registerTask('buildcss', ['sass:dist']);
       grunt.registerTask('devcss', ['sass:dev']);
   };

Im Verzeichniss sass/ möchte ich alle meine Anpassungen halten. Dazu zählen die Anpassungen in den Variablen und gegebenenfalls eine reduziete bootstrap.scss aus der nicht gewünschte Elemente auskommentiert worden sind. Wichtig ist das wir das !default am ende entfernen (Die Änderung in der _bootstrap_variables_override ist nur ein Testbeispiel um zu sehen das es geht. )

 mkdir sass
 vi _bootstrap-variables-override
    $headings-font-weight: 1800;

 vi sass/mystyle.scss
     @import "bootstrap-variables-override";
     @import "functions";
     @import "variables";
     @import "mixins";
     @import "root";
     @import "reboot";
     @import "type";
     @import "images";
     @import "code";
     @import "grid";
     @import "tables";
     @import "forms";
     @import "buttons";
     @import "transitions";
     //@import "dropdown";
     @import "button-group";
     @import "input-group";
     @import "custom-forms";
     ....
     ...

Jetzt mal starten und dann schauen wir ob die geänderte Schriftform für die Überschriften im CSS ankommt.

   grunt sass:dev                            
   Running "sass:dev" (sass) task

   Done.

   grep -b3 h1 mystyle.css

        .h1, .h2, .h3, .h4, .h5, .h6 {
          margin-bottom: 0.5rem;
          font-weight: 1800;
          line-height: 1.2;
        }

Jetzt kann ich mit einem Werkzeug (npm) sowohl meine Gruntkomponenten als auch meine Abhängigkeiten installieren, updaten und dann direkt meine produktiven Dateien bauen. In meiner Versionskontrolle brauche ich nur die Dateien

  • Gruntfile.js
  • package.json
  • sass/*

zu halten.

2.3.19 Weitere Beiträge zu: Grunt Bootstrap

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License