less-import-inserter
Insert some import statements into an existing Less file.
I mainly created this because I wanted to insert my own variables into Bootstrap's main Less file to override some of the default variables. I found this to be the easiest way to do that in situations where I wanted to quickly be able to play around with editing things like @grid-columns
and @grid-gutter-width
while starting to develop a site or theme.
Install
npm install less-import-inserter
Usage
var less = // Path to the less file to alter lessPath: path // Change the original bootstrap imports to be relative from this path relativeTo: __dirname after: 'variables.less': 'styles/override-variables.less' append: 'styles/app.less';console;
This will take the bootstrap.less
file found at the path, and insert an @import
statement after the variables.less
@import
. It will also append an @import
to the end of the file. The end result will look like this:
// Core variables and mixins "node_modules/bootstrap/less/variables.less"; "styles/override-variables.less"; "node_modules/bootstrap/less/mixins.less"; // Other Bootstrap @imports... "styles/app.less";
API
methods
build
Returns the less file with the added @import
statements.
options
new LessImportInserter(options)
options.lessPath
(required)
The path to the less file that you want to be read and then insert @import
statements into.
options.less
(optional, String)
If you don't want to pass in a path to a less file, you can pass in raw Less using this option.
options.relativeTo
(optional, String)
Allows you to rewrite all the existing @import
s to be relative to this path from the directory of lessPath
. Using this option you can write the resulting output to this path and all the @import
s will work.
options.before
(Object)
options.after
(Object)
Each object will insert the values either before or after the specified key. The key will be searched for in all the existing @import
statements so it can be any part of the path. The values can either be a String
or an Array
of strings. Here's an example:
before: 'utilities.less': 'styles/my-utilities.less' after: 'variables.less': 'styles/my-variables.less' 'styles/app/my-theme.less' 'mixins.less': 'styles/my-mixins.less'
This will do the following:
- Before the
utilities.less
import, insert an import forstyles/my-utilities.less
- After the
variables.less
import, insert imports forstyles/my-variables.less
andstyles/app/my-theme.less
- After the
mixins.less
import, insert an import forstyles/my-mixins.less
So the file will be changed to look like this:
previous
"old-theme/variables.less"; "plugin/mixins.less"; "components.less"; "utilities.less";
result
"old-theme/variables.less"; "styles/my-variables.less"; "styles/app/my-theme.less"; "plugin/mixins.less"; "styles/my-mixins.less"; "components.less"; "styles/my-utilities.less"; "utilities.less";
options.append
(String or Array)
These work the same way as the values for before
or after
except that they will be added to the end of the file instead of before or after an existing @import
.
Other Less tools
Check out lessitizer
which will take the resulting less from this an an input and create the css and write it to a file.
Tests and Code Coverage
Run npm test
.
License
MIT