Comments (3)
If you want to add a new scss file, you just add it in one of the css folders and make sure that it's included in the corresponding _index.scss file.
If you want to compile and output different .css files in different places depending on the .scss file take a look at this example:
`
var gulp = require("gulp"),
sass = require("gulp-sass"),
maps = require("gulp-sourcemaps"),
autoprefixer = require("gulp-autoprefixer"),
merge = require("merge-stream"),
browserSync = require("browser-sync").create();
var autoprefixerOptions = {
browsers: ["last 2 versions", "> 5%", "Firefox ESR"]
};
var sass_paths = [
"./app/cms/sass/core/core.scss",
"./app/cms/sass/modules/user-management/user-management.scss",
"./app/cms/sass/modules/user-management/user-edit-create.scss",
"./app/cms/sass/modules/news/news-category.scss",
"./app/cms/sass/modules/news/news-overview.scss",
"./app/cms/sass/modules/news/news-create.scss",
"./app/cms/sass/modules/booking/booking.scss",
"./app/cms/sass/modules/settings/sitemap.scss",
"./app/cms/sass/modules/settings/cache.scss",
"./app/sass/main.scss"
];
function determineCSSDestination(destination) {
var theDestination = "";
switch (destination) {
case "./app/cms/sass/core/core.scss":
theDestination = "./app/cms/css/";
break;
case "./app/cms/sass/modules/user-management/user-management.scss":
theDestination = "./app/cms/modules/user-management/css/";
break;
case "./app/cms/sass/modules/user-management/user-edit-create.scss":
theDestination = "./app/cms/modules/user-management/css/";
break;
case "./app/cms/sass/modules/news/news-category.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/news/news-overview.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/news/news-create.scss":
theDestination = "./app/cms/modules/news/css/";
break;
case "./app/cms/sass/modules/booking/booking.scss":
theDestination = "./app/cms/modules/booking/css/";
break;
case "./app/cms/sass/modules/settings/sitemap.scss":
theDestination = "./app/cms/modules/settings/css/";
break;
case "./app/cms/sass/modules/settings/cache.scss":
theDestination = "./app/cms/modules/settings/css/";
break;
case "./app/sass/main.scss":
theDestination = "./app/css/";
}
return theDestination;
}
gulp.task("compileSass", function() {
var tasks = sass_paths.map(function(path) {
return gulp
.src(path)
.pipe(maps.init())
.pipe(sass().on("error", sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(maps.write("./"))
.pipe(gulp.dest(determineCSSDestination(path)))
.pipe(
browserSync.reload({
stream: true
})
);
});
return merge(tasks);
});
gulp.task("browserSync", function() {
browserSync.init({
proxy: "",
open: "external"
});
});
gulp.task("watch", ["browserSync", "compileSass"], function() {
gulp.watch("app/cms/sass//*.scss", ["compileSass"]);
gulp.watch("app/sass//.scss", ["compileSass"]);
gulp.watch(["app/**/.php", "!app/includes/news-latest-for-index.php", "!app/includes/news-latest-for-post.php", "!app/includes/categories-for-list.php"], browserSync.reload);
gulp.watch("app/**/*.js", browserSync.reload);
});
`
from bootstrap-4-boilerplate.
I finally managed it to accept 2 scss and output them to css in /dist by editing the following parts:
//////-----------------////////
gulp.task('compileSass', function() {
// src changed so that all .scss files in folder are used
return gulp.src("assets/css/*.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
// same as above : gulp.src takes a glob of all .css files in css folder
return gulp.src("assets/css/*.css")
.pipe(cssmin())
// name each file with the suffix, rest of name will be same as before
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('clean', function() {
// changed css item so all .css files are deleted
del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
});
//////-----------------////////
from bootstrap-4-boilerplate.
Great! Nice to hear you figured it out.
from bootstrap-4-boilerplate.
Related Issues (20)
- Images for readme
- gulp-rigger or etc. HOT 1
- Do you think this library should also support a transpiler? HOT 3
- How to include fontawesome 5? HOT 2
- gulp serve dont work HOT 7
- Gulp build task creates minified versions of js and css, but they are mislinked in the html HOT 1
- Update to Bootstrap v4.1.3 HOT 1
- tweak to get sourcemaps showing HOT 3
- is possible without sass ? HOT 1
- How to include third party css/js/images plugin? HOT 1
- Vulnerabilitites after npm install HOT 6
- Error is gulp start HOT 4
- Bootstrap 4 beta HOT 1
- Easy maintainable? HOT 1
- v4.0.0 HOT 2
- How do we go about versioning? HOT 1
- Is this updated to the latest Bootstrap 4.0.0? HOT 1
- HTML main.css/main.js aren't replaced with .min during build? HOT 5
- How would one go about integrating gulp-file-include in this boilerplate? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-4-boilerplate.