Aurelia Less Support -

when using aurelia, see following css.

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

my questions is, can configure support less files? or need run preprocessor separately, converting our less files css files first?

thanks in advance.

i think question broad, answer depends on solution choose.

the get started page of aerelia shows how integrate bootstrap using jspm. source 1, 2 suggest fork bootstrap repository on github , use customized fork instead of original jspm. in package.json fiile of project replace bootstrap own fork in jspm dependencies, or run:

jspm install github:{username}/bootstrap@master 

for long term expect above cause troubles keeping fork date. have compile bootstrap (local) , push changes github every change.

alternatively can indeed download bootstrap , add less compile task gulp build tasks of project. suggested @matthew-james-davis in comments can use using sass aurelia's skeleton navigation project find out how this.

i suggest use bower locally install bootstrap:

bower install bootstrap 

the above install bootstrap in bower_components/bootstrap folder. don't modify these files directly. create less/project.less:

@import "bootstrap"; // custom code here 

notice compiling bootstrap requires autoprefix css processor too. see also: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/

so gulp build task should 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 can reference file in index.html of project:

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

you have load bootstrap javascripts plugin. these plugin depends on jquery. link bootstrap.min.js bower_component folder.