Neverending Plethora of Modules
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    less-import-inserterpublic

    This package has been deprecated

    Author message:

    This package is no longer maintained.

    less-import-inserter

    NPM Build Status

    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 = new LessImportInserter({
        // Path to the less file to alter
        lessPath: path.join(__dirname, 'node_modules/bootstrap/less/bootstrap.less'),
        // Change the original bootstrap imports to be relative from this path
        relativeTo: __dirname,
        after: {
            'variables.less': 'styles/override-variables.less'
        },
        append: 'styles/app.less'
    }).build();
    console.log(less);

    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 
    @import "node_modules/bootstrap/less/variables.less";
    @import "styles/override-variables.less";
    @import "node_modules/bootstrap/less/mixins.less";
     
    // Other Bootstrap @imports... 
     
    @import "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 @imports 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 @imports 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 for styles/my-utilities.less
    • After the variables.less import, insert imports for styles/my-variables.less and styles/app/my-theme.less
    • After the mixins.less import, insert an import for styles/my-mixins.less

    So the file will be changed to look like this:

    previous

    @import "old-theme/variables.less";
    @import "plugin/mixins.less";
    @import "components.less";
    @import "utilities.less";

    result

    @import "old-theme/variables.less";
    @import "styles/my-variables.less";
    @import "styles/app/my-theme.less";
    @import "plugin/mixins.less";
    @import "styles/my-mixins.less";
    @import "components.less";
    @import "styles/my-utilities.less";
    @import "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

    install

    npm i less-import-inserter

    Downloadsweekly downloads

    7

    version

    2.0.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar