I'm building a custom Wordpress theme using Zurb's Foundation 5 and compiling it with Gulpjs which is amazingly fast. I have Gulpjs installed in my WP themes folder and it compiles my app.scss file everytime I save it perfectly. However if I make any changes to any of the Sass partials included in Foundation, Gulp doesn't automatically compile them until I make a change to the app.scss and save app.scss again.
Is there a way automatically compile when I make changes to the partials, or any other .scss file included in my theme for that matter, when I save them?
Here's a link to the starter theme I'm using, showing all the files I'm using. The gulpfile.js can be found in the root folder.
https://github.com/schikulski/gromf
Thanks!!
Figured it out! If anyone needs similar help.
I added
'bower_components/foundation/scss/foundation/components/_*.scss'
to the gulpfile.js
gulp.task('sass', function (){
gulp.src([
'bower_components/foundation/scss/normalize.scss',
'bower_components/foundation/scss/foundation/components/_*.scss',
'assets/scss/app.scss'])
.pipe(sass({style: 'compressed', errLogToConsole: true}))
.pipe(concat('main.css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css/'))
.pipe(livereload());
util.log(util.colors.yellow('Sass compiled & minified'));
});
Have you tried adding 'bower_components/foundation/scss/foundation/foundation.scss' to your source? That is the file with all of the #import's for foundation.
Related
Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands
gulp serve
I don't know the above command was to compile again scss into css but it didn't work
So ,kindly help with this or just a provide a link to the tutorial from where i could learn this
Here's the link for the project that i have just downloaded
https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template
Thanks in Advance
Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.
You can use free compilers online, for example https://www.cssportal.com/scss-to-css/.
If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.
https://mdbootstrap.com/bootstrap-gulp-tutorial/
You can also easily setup Gulp yourself:
https://codehangar.io/gulp-sass/
The above URL explains the following a little more extensive:
npm install gulp-sass --save-dev
Structure:
-index.html
--assets
---styles
----sass
-----index.scss
----css
The 'styles' Task
//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Watcher
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
gulp watch
I have a project which a dependency on Bootstrap. I'm customising the Boostrap variables so using gulp to do a custom compile of Bootstrap's LESS source. The rest of the CSS in my project is written with SASS. I have an imports.sass file which includes the following line:
#import '../bootstrap/compiled/custom-bootstrap';
What I'm trying to do is compile the Bootstrap LESS to CSS, then run a SASS task to create a CSS file which includes the compiled Bootstrap CSS. My 2 gulp tasks which achieve this are as follows:
gulp.task('bootstrap', function () {
return gulp
.src('assets/bootstrap/custom-bootstrap.less')
.pipe(less())
.pipe(gulp.dest('assets/bootstrap/compiled'));
});
gulp.task('sass', function () {
return gulp
.src('assets/scss/*.scss')
.pipe(sass({
includePaths: ['assets/bootstrap/compiled']
}).on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
The first time I run this, the bootstrap task completes successfully, but the sass task throws this error:
Error in plugin 'sass' Message:
assets\scss\_imports.scss Error: File to import not found or unreadable: ../bootstrap/compiled/custom-bootstrap
Parent style sheet: [path/to]/assets/scss/_imports.scss
on line 5 of assets/scss/_imports.scss
>> #import '../bootstrap/compiled/custom-bootstrap';
^
When I run it a second time both complete successfully so clearly the problem is the fact that custom-bootstrap.css doesn't exist at the start of the initial run. However, you can see I've added the relevant includePaths option which seems to be the solution for other similar issues elsewhere on SO. Perhaps I'm not specifying this path correctly?
To complete the information you need, here is the structure of my solution detailing the relevant files. I'm confident the paths I've used are correct but just in case I've missed something...
assets
bootstrap
custom-bootstrap.less
custom-variables.less
scss
_imports.scss
main.scss
gulpfile.js
In case it's relevant, this is the front-end for an ASP.NET solution so I'm using Visual Studio's task runner to execute the gulp tasks, and this also explains why gulpfile.js is in the root of the project.
i just installed Foundation 6 through:
foundation new
I chose Foundation for Sites. The file structure is created ann all look ok.
then i run
foundation watch
everything looks fine. The gulp runs and watches the changes.
i then created _custom.scss and imported it into app.scss with:
#import 'custom';
i even put the command to the end of the file to see if this changes anything.
I write some css in the custom file then i save.
I can see the custom css created inside scss/app.scss file but the custom CSS does not appear.
Also even if i change a parametter in _settings.scss like
$body-background: $black;
it has no effect.
All the above changes are reflected in the
foundation watch
terminal window though. I can see the sass compiler updating without errors.
thanks
Maybe it's cache, you should check that. I don't know how foundation new is working, but it's watching the foundation source code right? Maybe there is a conflict between foundation tool and gulp. What I mean by that is that maybe foundations is compiling, then gulp is recompiling without your file.
I suggest you to check:
Maybe there is some cache provided either by foundation or by gulp-cache or other plugin
It is possible some kind of rewrite, so check that too
Make sure there are no errors in your file, otherwise the changes won't be made
Your custom file should be included last, so it can overwrite other classes
If this didn't help, try a different approach with gulp and bower. Make these changes to your gulpfile:
var gulp = require('gulp'),
...,
connect = require('gulp-connect'),
sass = require('gulp-sass');
var paths = {
css: [
'bower_components/foundation-6/css/foundation.min.css',
'src/sass/*.scss',
'src/sass/**/*.scss'
],
...
}
gulp.task('connect', function() {
connect.server({
root: 'dist',
livereload: true,
host: '0.0.0.0',
port: '8080'
});
});
gulp.task('css', function() {
gulp.src(paths.css)
.pipe(sass())
...
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch(paths.css, ['css']);
});
gulp.task('default', ['connect', 'css', 'watch']);
Basically I am suggesting to download foundation scss with bower, and include it in gulp.
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow:
Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build
The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less.
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB?
you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------
#import "variables.less";
//import custom-variables after variables so the values will override.
#import "custom-variables.less"; //only has variables that have changed.
#import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Here's the solution which worked for me:
Use bower to install all UI packages e.g. bower install bootstrap chosen
Create a separate folder less which contains all the LESS modifications. This article was very helpful here.
Here's my less/styles.less file:
#import "../bower_components/bootstrap/less/bootstrap.less";
#import "../bower_components/bootstrap-chosen/bootstrap-chosen.less";
//My custom variables - overrides the bootstrap variables file
#import "variables-custom.less";
Use grunt to monitor changes within the less folder and compile them into .css
Here's my Gruntfile.js (thanks to this answer):
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: true
},
files: {
"./static/css/styles.css": "./less/styles.less"
}
}
},
watch: {
files: "./less/*",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This is indeed the best customization method. You create a theme.less and pull in original Bootstrap files (which can get upgraded in the future) and in the same file you call your own custom overrides. Either you #import them from a custom file which is not in the Bower directory or you just write your custom rules in your theme.less itself. You'll find this technique explained in this tutorial as well.
With Grunt, custom setups can get tricky. But with Brunch it's a piece of cake (yes!) and all pretty much goes automatically. Your grandma could do it.
As for avoiding the inclusion of bower_components in source control: with Git it's easy. You just check-in your bower.json but make sure to add /bower_components to your .gitignore file.
You should just create your own style sheet, use both with your custom one listed secondly. That way you can make changes but not change bootstrap at all.
Also, when you update, you keep your style sheet the same.
This allows you to change bits and pieces of Bootstrap but not actually changing the file, you're overriding it.
To be clear, your second CSS file would be SIGNIFICANTLY smaller... Only putting things your needed to change in it.
How do you generate bootstrap.css file from the variables.less and bootstrap.less files from http://bootswatch.com/ ?
Compiling using lessC, I get a css file but that is way smaller than bootstrap.css. How am I supposed to change the colour in one of the themes?
Thanks a ton.
Bootswatch Swatchmaker is great and all but sometimes you are trying include Bootswatch themes in a more scriptable environment or need a better understanding of how Bootswatch themes are put together. Here is my method for manually compiling a Bootswatch Theme.
Download Twitter Bootstrap from the source and uncompress.
Move the Bootswatch files variables.less and bootswatch.less to the less/ folder, replacing the existing variables.less file.
At the end of bootstrap.less, append #import "bootswatch.less";.
Compile bootstrap.less. I recommend using the grunt task provided by Bootstrap.
Bootswatch Swatchmaker
Thomas Park, the maker and maintainer of Bootswatch, made a little kit called Swatchmaker specifically for the purposes of customizing themes from Bootswatch or creating new ones.
Check out the Swatchmaker readme in his Bootswatch repo on GitHub for more info.
Once you get that set up, just add the LESS files for the theme you want to edit to the swatch directory, editing the variables.less with your customizations.
The contents of the swatchmaker.less gives a decent summary of what it does:
#import "bootstrap/less/bootstrap.less";
#import "swatch/variables.less";
#import "swatch/bootswatch.less";
#import "bootstrap/less/utilities.less";
Then bootstrap.css is generated from lessc swatchmaker.less > bootstrap.css.
Not sure how to do this as a "supplemental" answer (#merv has already given the correct answer!), but just in case it's useful to anyone:
My problem was that I want to use just the bootstrap.less and variables.less file to generate a new theme in a way that simply used the Grunt tasks already developed in the Bootstrap distribution. I didn't want to install any Bootswatch-specific tools to compile a new theme.
I already have a modified build script that uses the core bootstrap from path /lib/bootstrap. I consider the theme to be a part of the lib as well, but I gave it its own directory: /lib/theme
Inside the theme directory, I put the two files downloaded from http://bootswatch.com -- namely, "bootswatch.less" and "variables.less". Thing is, these two files don't really "do anything" by themselves; they still rely on Bootstrap. So hooking it all up meant CREATING a third file, which I called "theme.less". The contents of theme.less are as described by #merv above:
#import "../bootstrap/less/bootstrap.less";
#import "variables.less";
#import "bootswatch.less";
#import "../bootstrap/less/utilities.less";
Your paths will be different depending on how you've structured your project. Then, in the Gruntfile.js (modified from the one included in Bootstrap), you locate the compileTheme configuration object and modify it to point to this new theme.less file:
compileTheme: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>-theme.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
},
src: 'lib/theme/theme.less',
dest: 'dist/css/<%= pkg.name %>-theme.css'
}
It's only the "src" line that has changed.
Now when you run > grunt dist (or any other related grunt tasks) it will pick up the theme from the new location, apply the appropriate parts of Bootstrap's included files, and produce a new theme.
Hope that's helpful to anyone. It doesn't answer the OP directly since it's a bootstrap-theme.css file rather than a bootstrap.css file, but it's more in line with what people tend to do with Bootstrap 3.2+ as of this writing. And more importantly, for those who are relative newcomers to all things LESS and Grunt, it's a fairly pain-free way to modify the build script without overwriting files in the bootstrap directory.