Use LESS to preprocess your ember-cli app CSS.
This is copied from https://github.com/aexmachina/ember-cli-sass. All credits to the author.
npm install --save-dev ember-cli-less
By default, this addon will compile app/styles/app.less
into dist/assets/app.css
.
In your development environment, a source map will be automatically be generated.
Additional options can be specified using the lessOptions
config property in Brocfile.js
:
var app = new EmberApp({
lessOptions: {...}
...
});
Options:
paths
: an array of include pathssourceMap
: whether to generate source maps. Defaults totrue
in development.
You can configure the input and output files using ember-cli's outputPaths
option in Brocfile.js
(requires ember-cli >= 0.1.13):
var app = new EmberApp({
outputPaths: {
app: {
css: {
'app': '/assets/my-project.css'
}
}
}
});
You can also configure multiple output paths as follows:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'theme-orange': '/assets/theme-orange.css',
'theme-purple': '/assets/theme-purple.css'
}
}
}
});
Using Bootstrap LESS source in your app and create a shortcut path:
Install Bootstrap source:
bower install --save bootstrap
Specify the include paths in Brocfile.js:
var app = new EmberApp({
lessOptions: {
paths: [
'bower_components/bootstrap/less'
]
}
});
Import into app.less:
@import 'bootstrap';
When setting sourceMap: true
, a source map will be generated inline in the compiled css file.
When inspecting elements in dev tools (Chrome), you'll see the correct references to the original less files and their corresponding line numbers.
However, if you would like to click into the less source files directly, you have to link them to your local filesystem:
- Open dev tools > Sources tab
- Expand the sources pane on the left if it's not open
- Right-click anywhere, Add folder to workspace, add your project's folder
- Locate any less source file in the tree, right-click, Map to Network Resource... to create the mapping