I've got Bourbon and Neat installed via Bower (in the /bower-components folder) and I was wondering if I am able to call them in my .scss files like so, using Gulp.
#import 'bourbon';
I've just switched over from Grunt and was wondering if Gulp had a similar loadPath option. I'd normally use this to reference that Bower directory in my Gruntfile.js, like below:
sass: {
dist: {
options: {
style: 'expanded',
loadPath: '<%= app %>/bower_components/foundation/scss'
files: {
'<%= app %>/css/app.css': '<%= app %>/scss/app.scss'
}
}
}
Any help with this would be appreciated. Thanks in advance!
I ended up using gulp-ruby-sass, that while is a bit slower than gulp-sass is rich with features, such as loadPath.
Let me show you an example installing bootstrap, Install gulp-ruby-sass but before that make sure you have ruby installed first:
npm install gulp-ruby-sass --save-dev
In gulpfile.js define the process:
var sass = require('gulp-ruby-sass')
gulp.task('processSCSS', function () {
return sass('./path/to/scss/you/mention/#important/main.scss', {
style: 'compressed',
loadPath: [
'./path/to/scss',
'./path/to/bower_component/bootstrap-sass/assets/stylesheets'
]
})
.on('error', sass.logError)
.pipe('./path/to/dest/stylesheets/')
});
In main.scss just call stylesheet:
#import 'bootstrap'
Related
I am trying to use foundation sites in my project so I downloaded it using bower.
I have a gulp.config.js file which has the following code:
module.exports = function() {
// PATHS TO JS AND SASS
var GETPATHS = {
VENDOR: [
'bower_components/jquery/dist/jquery.min.js'
],
JS: [
'bower_components/foundation-sites/js/foundation.core.js',
'src/assets/**/*.js'
],
SASS: [
'bower_components/foundation-sites/scss',
'src/assets/scss/components'
]
}
return GETPATHS;
}
and my gulpfile itself has this (SASS):
gulp.task('sass', function() {
return gulp.src('src/assets/scss/app.scss')
.pipe(sass({ includePaths: config.SASS }))
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest('_build/assets/css'))
.pipe(browserSync.stream());
});
and here's my app.scss file
#import "foundation";
Now, the problem is I don't know why app.css (after getting compiled) is showing an empty file. The import "foundation" doesn't seem to work. Any help is appreciated as I am quite new to this. Thanks!
I suggest installing one of the Foundation Sites templates or using the foundation cli to bootstrap a project and get the needed file with all imports.
foundation.scss just contains the mixins.
You can see an example for the right config at https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss and https://github.com/zurb/foundation-sites-template/blob/master/scss/app.scss
Also see Gulp & Foundation 6 not compiling
How to include a 3rd party css in ionic2? I guess it is probably linked to webpack config but I can't find any example anywhere, does someone know? for example, adding font-awesome css file after npm install font-awesome
For those who are interested in this, you can just add the files in the build process in the ionic.config.js like:
module.exports = {
...
sass: {
src: [
'app/theme/app.+(ios|md).scss',
'node_modules/font-awesome/scss/font-awesome.scss'
],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/font-awesome/scss'
]
},
fonts: {
src: [
'node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)',
'node_modules/font-awesome/fonts/*.+(ttf|woff|woff2)'
],
dest: 'www/build/fonts'
}
...
}
This will compile font-awesome.css under www/build/css and fonts under www/build/fonts
ionic.config.js has been deprecated.
The correct answer is now:
npm install font-awesome
Then edit your gulpfile.js to add options to the sass and fonts tasks:
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/font-awesome/scss'
]
}
});
});
gulp.task('fonts', function(){
return copyFonts({
src: [
'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'
]
});
});
You can find more information on the gulp tasks here: https://github.com/driftyco/ionic-gulp-tasks.
Then you should be able to #import "font-awesome" in your app/theme/app.core.scss file and use it in your project wherever.
You can normally put css files in the index.html page and just use the css classes wherever you want. By default, your components are not completely isolated from the outside world so you should be able to use lets say bootstrap without any problems
I'm trying to install 'modular-scale' (https://github.com/Team-Sass/modular-scale) via my Gruntfile but I can't get it to work.
Note that I don't use a config.rb, I want to require the plugin using Grunt via grunt-contrib-compass.
I thought it was as simple as adding this to my Gruntfile (after the grunt.initConfig({ etc):
compass: {
dist: {
options: {
require: ['modular-scale'], // This line here
sassDir: 'setup',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
The watch task is absolutely fine. The problem is that if I use one of the SASS variables that are part of the 'modular-scale' plugin, I'll get an error thrown up, suggesting that the 'modular-scale' isn't actually being required.
Am I missing something here?
You no longer need Compass or a config.rb file to use modular-scale.
My directory structure looks like below:
--myapp/
--client/
--build/
--css/
--js/
--angular/ #angular libraries here
--angular.js
--angular-resource.js
--angular-ui-router.js
--jquery/ #jquery libraries here
--jquery.js
--app.js
--index.html
--server/ #All server related files here
--Gruntfile.js
My Grunt file so far looks like this
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
dist: {
src: ['client/js/angular/*.*]
dest: 'client/build/angular-build.js'
}
}
});
};
This is as far as I have gotten. Don't see any easy grunt file tutorials on this.
Th ouput I am looking for is all angular libraries in one output file. All jquery libraries in another.. all css libraries in third.
How do i achieve this ?
A few things:
You don't know it, but you're using grunt-contrib-concat, so you'd better npm install that and grunt.loadNpmTasks('grunt-contrib-concat'); it.
Concat doesn't support wildcards. This is good, because the order that these files are included is going to matter. angular.js must be included before angular-resource.js
I've included a rough template of what your Gruntfile needs to look like to accomplish this, but know that this is not the right way to do this. You should be loading your dependencies using something like bower and serving them individually, or using something like Browserify or Require.js. You'll come to see the value of that as the project progresses.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
angular: {
src: [
'client/js/angular/angular.js',
'client/js/angular/angular-resource.js',
'client/js/angular/angular-ui-router.js'
]
dest: 'client/build/angular-build.js'
},
jquery: {
src: ['client/js/jquery/jquery.js']
dest: 'client/build/jquery-build.js'
},
...
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks
#import "variables";
#import "mixins";
It seems I can not use watch mode in this setting. Is there any other ways?
Upd. This syntax is for old grunt versions so it should not be used.
You need to use LiveReload app for this. Or maybe another software that can reload page with LiveReload browser extension (maybe Sublime Text editor with a plugin).
Possible setup is Node.js with Grunt which has grunt-contrib-less and grunt-reload modules installed.
Your grunt.js config should look like this:
module.exports = function(grunt) {
grunt.initConfig({
// Start LiveReload server
reload: {
port: 35729,
liveReload: {}
},
// Simple css compilation
less: {
src: 'less/app.less',
dest: 'css/app.css'
},
// Reload files on change
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
});
// Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');
// Register default task
grunt.registerTask('default', 'less');
};
Then you need to run
$ grunt watch:less
and
$ grunt watch:reload
in two separate terminal windows.
I'm totally agree with this comment
Refresh less css which has other imported less files without page load .
Thanks, thevasya.
But there's no need to start several terminals.
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
after that you can start watching by
$ grunt watch
and that's it. If you change any less file, it will start only less task.
P.S.: This answer was updated for proper work with grunt 0.4.