Import-scss NPM

version

Import-scss

Forget about adding new import to the main scss file whenever you create new module. Import-scss will do it for you.

Install

npm install import-scss --save-dev

Usage

To run it, you have to call it with NPM script in your package.json file.

// package.json
"import-scss": "import-scss"

// then in console
npm run import-scss

The script will be called once and it will update all imports in your main.scss file. It looks for a folder where your main.scss file is placed. From there and beyond it searches for any _*.scss file. Keep your variables in _variables.scss.

Running import-scss in watch mode

Import-scss is a really small package and it doesn't have functionality to observe files and re-run on it's own. With the help comes nodemon. You have to have nodemon installed. Then you can paste this script into your package.json:

// package.json
"import-scss": "nodemon --exec 'import-scss' --ignore .js --ignore main.scss --ext scss"

// then in console
npm run import-scss

It simply tells nodemon to run our package and observe only files with an '.scss' extension and omit .js and main.scss explicitly.

You can also run it simultaneously with other scripts using concurrently ( or anything similar ). Package.json would look like this:

// package.json
"import-scss": "nodemon --exec 'import-scss' --ignore .js --ignore main.scss --ext scss",
"example-script": "concurrently \"some-script\" \"npm:import-scss\""

That's it!

The output in main.scss file should look like this:

// File generated by import-scss
    
@import "example-module1";
@import "example-module2";
@import "example-module3";
@import "some-folder/example-module4";
@import "some-folder/example-module4";