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.