Update JS task runners and base HTML to handle custom scss compilation

This commit is contained in:
Bruno Alla 2018-01-03 15:12:58 +01:00
parent 7b709491b8
commit b11f828096
4 changed files with 19 additions and 54 deletions

View File

@ -61,7 +61,7 @@ module.exports = function (grunt) {
options: {
outputStyle: 'nested',
{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
includePaths: ['bower_components/bootstrap-sass/assets/stylesheets/bootstrap/'],
includePaths: ['node_modules/bootstrap/scss'],
{% endif %}
sourceMap: false,
precision: 10
@ -74,7 +74,7 @@ module.exports = function (grunt) {
options: {
outputStyle: 'compressed',
{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
includePaths: ['bower_components/bootstrap-sass/assets/stylesheets/bootstrap/'],
includePaths: ['node_modules/bootstrap/scss'],
{% endif %}
sourceMap: false,
precision: 10

View File

@ -33,7 +33,7 @@ var pathsConfig = function (appName) {
sass: this.app + '/static/sass',
fonts: this.app + '/static/fonts',
images: this.app + '/static/images',
js: this.app + '/static/js',
js: this.app + '/static/js'
}
};
@ -45,8 +45,15 @@ var paths = pathsConfig();
// Styles autoprefixing and minification
gulp.task('styles', function() {
return gulp.src(paths.sass + '/*.scss')
.pipe(sass().on('error', sass.logError))
return gulp.src(paths.sass + '/project.scss')
.pipe(sass({
includePaths: [
{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
'node_modules/bootstrap/scss',
{% endif %}
paths.sass
]
}).on('error', sass.logError))
.pipe(plumber()) // Checks for errors
.pipe(autoprefixer({browsers: ['last 2 versions']})) // Adds vendor prefixes
.pipe(pixrem()) // add fallbacks for rem units

View File

@ -1,54 +1,6 @@
{% if cookiecutter.custom_bootstrap_compilation == 'y' %}
@import "variables";
@import "custom_bootstrap_vars";
@import "mixins";
// Reset and dependencies
@import "normalize";
@import "print";
@import "glyphicons";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "component-animations";
@import "dropdowns";
@import "button-groups";
@import "input-groups";
@import "navs";
@import "navbar";
@import "breadcrumbs";
@import "pagination";
@import "pager";
@import "labels";
@import "badges";
@import "jumbotron";
@import "thumbnails";
@import "alerts";
@import "progress-bars";
@import "media";
@import "list-group";
@import "panels";
@import "responsive-embed";
@import "wells";
@import "close";
// Components w/ JavaScript
@import "modals";
@import "tooltip";
@import "popovers";
@import "carousel";
// Utility classes
@import "utilities";
@import "responsive-utilities";
@import "bootstrap";
{% endif %}

View File

@ -14,13 +14,19 @@
<![endif]-->
{% block css %}
{% endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
<!-- Latest compiled and minified Bootstrap 4 beta CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
{% endraw %}{% endif %}{% raw %}
<!-- Your stuff: Third-party CSS libraries go here -->
{% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress css %}{% endraw %}{% endif %}{% raw %}
<!-- This file stores project-specific CSS -->
{% endraw %}{% if cookiecutter.js_task_runner == "Gulp" %}{% raw %}
<link href="{% static 'css/project.min.css' %}" rel="stylesheet">
{% endraw %}{% else %}{% raw %}
<link href="{% static 'css/project.css' %}" rel="stylesheet">
{% endraw %}{% endif %}{% raw %}
{% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
{% endblock %}