By default Grunt compiles bootstrap.less into bootstrap.css. The question is how do I make it compile my custom styles.less where I am going to import all Bootstrap less files plus some of my own into styles.css?
In think there are many answers for that question. I think you should following the advice of #seven-phases-max and try to not modify the source code (or at least make minimal changes).
In your Gruntfile.js you will find, two Less compile arguments (compileCore and compileTheme):
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileTheme: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>-theme.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
},
src: 'less/theme.less',
dest: 'dist/css/<%= pkg.name %>-theme.css'
}
}
And the following task defined: grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
It should be easy to add your own sub task and compile argument. When doing that you can compile your styles.less into styles.css. Notice that you have a separated CSS file as result. Loading that file requires a extra http request.
Unless you import bootstrap's Less code in your styles.less you can also not reuse Bootstrap's variables and mixins. If you need a separated CSS file consider to create your styles.less as follows:
#import (reference) "bootstrap";
//your custom code here
In the case that you are able to compile all you code in a single CSS file, you can do the following:
Create a file custom.less and add your customization in that file. And save that file in the same folder as your bootstrap.less file.
Than write at the end of the bootstrap.less file the following code: #import "custom";
After that you can compile bootstrap as usually.
Alternatively create custom.less as follow:
#import "bootstrap";
//your custom code here
To compile custom.less instead of bootstrap.less by default you should have to modify your Gruntfile.js. In the CompileCore argument change the src option into src: 'less/custom.less',.
Related
How can I set up Express to use style.scss file instead of style.sass ?
It only recognizes style.sass with the following configuration.
app.js
// Sass setup
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public/sass'),
dest: path.join(__dirname, 'public/css'),
indentedSyntax: true,
sourceMap: true,
outputStyle: 'compressed'
}));
Structure tree
-public
--stylesheets
---style.css
---style.css.map
---style.sass
I would like to use style.scss instead of style.sass.
If you want to use scss files, you can remove the key/value intentedSyntax. This option allows you to use scss files
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public/sass'),
dest: path.join(__dirname, 'public/css'),
sourceMap: true,
outputStyle: 'compressed'
}));
However, say if you used indentedSyntax but wanted to use the file extension scss - then you'll have to make a decision.
use indentedSyntax (and keep .sass)
use .scss and ensure you have brackets in your scss files.
If you're using sass 3.x then you can use the above proposed solution.
I am trying to get Wallaby to work with a TypeScript app, using Browserify and Wallabify. However, when I run Wallaby, it outputs No failing tests, 0 passing, and all test indicators are grey.
The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.
module.exports = function() {
var wallabify = require('wallabify');
var wallabyPostprocessor = wallabify({
entryPatterns: [
'app/spec.setup.ts',
'app/src/**/*.spec.ts'
]
}
);
return {
files: [
{pattern: 'app/spec.setup.ts', load: false, instrument: false},
{pattern: 'app/spec.util.ts', load: false, instrument: false},
{pattern: 'app/src/**/*.ts', load: false},
{pattern: 'app/src/**/*.spec.ts', ignore: true}
],
tests: [
{pattern: 'app/src/**/*.spec.ts', load: false}
],
testFramework: 'mocha',
postprocessor: wallabyPostprocessor,
bootstrap: function (w) {
// outputs test file names, with .ts extensions changed to .js
console.log(w.tests);
window.__moduleBundler.loadTests();
}
};
};
What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.
I've also figured that the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.
I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.
P.S. with my current StackOverflow reputation I couldn't add two new tags: wallaby and wallabify. Could someone do me a favour and add the two tags please.
Because TypeScript compiler renames files to .js and applied before wallabify, you need to change your entry patterns like this to make it work:
entryPatterns: [
'app/spec.setup.js',
'app/src/**/*.spec.js'
]
My less organization right now is as follows:
styles/pages/page1/index.less
styles/pages/page1/tab1.less
...
styles/widgets/widget1.less
styles/widgets/widget2.less
...
styles/tools/partials.less
...
styles/app.less
The entirety of my app.less file are #import statements to bring all the other parts in.
#import "tools/partials";
#import "widgets/widget1";
#import "widgets/widget2";
#import "pages/page1/index";
#import "pages/page1/tab1";
//...
These statements are maintained manually, which sucks. Is there a better way?
I'm dreaming of something like this:
#import "tools/partials";
#import "widgets/*";
#import "pages/**/*";
Maybe some kind of script to handle this on the editor level (using WebStorm)? Or perhaps some kind of plugin for the less compiler itself?
Right now I'm serving less files from an express middleware in my app, but I can easily switch to grunt if there's a solution there.
Take a look at grunt-less-imports. It maintains an imports file based on your files (app.less in your case).
Here is how I use it in my recent project. I have a bunch of less files, like so:
And I use grunt-less-imports like so (gruntfile.js):
less_imports: {
options: {
banner: '// Compiled stylesheet'
},
styles: {
src: ['<%= config.app %>/assets/less/**/*.less', '!<%= config.app %>/assets/less/styles.less'],
dest: '<%= config.app %>/assets/less/styles.less'
}
},
This task make a styles.less with imports:
So you just add-delete your less files, and task do the job importing them. Is it what you looking for?
Update
If you need more structure in your imports file, you can get some. For example, i have two folders with less files, page-frame-blocks and popups and want them to be imported first:
less_imports: {
options: {
banner: '// Compiled stylesheet'
},
styles: {
src: [
'<%= config.app %>/assets/less/page-frame-blocks/*.less',
'<%= config.app %>/assets/less/popups/*.less',
'<%= config.app %>/assets/less/*.less',
'!<%= config.app %>/assets/less/styles.less'],
dest: '<%= config.app %>/assets/less/styles.less'
}
},
Now my imports file looks like this:
Want popups styles be imported first? Just move it to top in src section. You get the idea - you can explicitly say what folders you want and in what order using grunt globbing patterns.
Here is my problem. In my css directory I have a less directory that holds page.less, and search.less. Inside page.less I am using the import method to render my search styles when grunt complies my less files. I end up with page.css. In page.css the search styles are being added twice even though inside the page.less file I am only importing it in one place
My gruntfile.js is as follows
less: {
options: {
compress: false,
ieCompat: false
},
dev: {
dest: "css/page.css",
src: [
"css/less/*"
]
}
},
The pattern src: ["css/less/*"] is compiling all files.
This pattern should only include files that are not imported into other files, otherwise you will be including file B (which imports file A) and file A itself - again.
In compass-sass the underscore is used to identify files being imported into others, while "main" files (which import others) have no underscore.
I have setup a project with Bootstrap's less files and gruntjs in order to be able to have live edit in the Chrome Workspaces.
Hereunder is my Gruntfile.js. It auto-compiles less files into the desired style.css and creates a source map file when I save my changes. I'm also able to edit and save less files from Chrome Workspaces after adding the project directory to the Workspaces.
module.exports = function(grunt) {
'use strict';
require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
sourceMap: true,
sourceMapFilename: 'public/css/style.map',
sourceMapBasepath: 'public/css'
},
files: {
'public/css/style.css': 'less/style.less'
}
}
},
watch: {
all: {
files: ['less/**/*.less'],
tasks: ['less'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
};
The problem I'm having is that I'm unable to see the live reload of my modifications on the less files via Sublime Text 2 or Chrome Workspaces directly in the browser without refreshing the page.
What am I missing? I have to map files? What file to what file exactly? Will I need to map multiple the same way or only one file.
I've also added an image where you can see the files tree.
FYI, also please note that the style.less imports the bootstrap less files and my custom less files.
// Core variables and mixins
#import "bootstrap/bootstrap";
#import "showtime/lib";
#import "showtime/intro";
#import "showtime/nav";
#import "showtime/portfolio";
#import "showtime/contact";
#import "showtime/footer";
#import "showtime/album";
Update If edit from the Elements tab, my style.less file gets overwritten with the content that is also in style.css and then it works. What am I doing wrong ?
Many thanks for your time and help.
OK the only I was able to make everything work is by putting the less files in my css folder.