Aurelia Less Support

Question

When using Aurelia, I see the following for CSS.

import 'bootstrap/css/bootstrap.css!';

My questions is, can you configure it to support less files? Or do we need to run the preprocessor separately, converting our less files into css files first?

Thanks in advance.

possible duplicate of [Using SASS with Aurelia's Skeleton Navigation project](http://stackoverflow.com/questions/29739118/using-sass-with-aurelias-skeleton-navigation-project) — Matthew James Davis, Apr 26 '15 at 01:10

score 3 · Accepted Answer · edited May 23 '17 at 11:52

I think your question is very broad, the answer depends on the solution you choose.

The get started page of Aerelia shows you how to integrate Bootstrap using jspm. Some source 1, 2 suggest to fork the Bootstrap repository on github and use this customized fork instead of the original with jspm. In the package.json fiile of your project replace Bootstrap with your own fork in the jspm dependencies, or run:

jspm install github:{username}/bootstrap@master

For the long term i expect that the above will cause you troubles with keeping your fork up to date. Also you will have to compile Bootstrap (local) and push your changes to github for every change.

Alternatively you can indeed download Bootstrap and add to Less compile task to the gulp build tasks of your project. As already suggested by @matthew-james-davis in the comments you can use Using SASS with Aurelia's Skeleton Navigation project to find out how to do this.

I suggest to use bower to locally install Bootstrap:

bower install bootstrap

The above will install bootstrap in the bower_components/bootstrap folder. Don't modify these files directly. Create a less/project.less:

@import "bootstrap";
// your custom code here

Notice that compiling Bootstrap requires the autoprefix css processor too. See also: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/

So you gulp build task should look like that shown below:

var LessPluginCleanCSS = require('less-plugin-clean-css'),
    LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    cleancss = new LessPluginCleanCSS({ advanced: true }),
    autoprefix= new LessPluginAutoPrefix({ browsers: ["Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"] });

gulp.task('build-less', function() {
    gulp.src('less/project.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix, cleancss],
            paths: [ path.join(__dirname, 'bower_components/bootstrap/less/') ]
         }))
        .pipe(sourcemaps.write(paths.sourceMapRelativePath))
        .pipe(gulp.dest('css/'))
});

The above task should compile css/project.css you can reference this file in the index.html of your project:

<link rel="stylesheet" type="text/css" href="css/project.css">

You also will have to load Bootstrap Javascripts plugin. These plugin depends on jQuery. Link bootstrap.min.js from your bower_component folder.

Aurelia Less Support

1 Answers1