Giter Site home page Giter Site logo

Comments (3)

henrikhb avatar henrikhb commented on July 29, 2024

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.

masdab avatar masdab commented on July 29, 2024

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.

henrikhb avatar henrikhb commented on July 29, 2024

Great! Nice to hear you figured it out.

from bootstrap-4-boilerplate.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.