{ } scss-to-css

Recursively compile all SCSS files into minified CSS

⚡ Installation

Global utility:

npm install -g @adamlui/scss-to-css

Dev dependency (for build scripts):

npm install -D @adamlui/scss-to-css

Runtime dependency (for on-the-fly compilation):

npm install @adamlui/scss-to-css

💻 Command Line Usage

Basic Command

scss-to-css

Output example:

Note

Source maps are generated by default unless -S or --no-source-maps is passed

Specify Input/Output Paths

scss-to-css [input_path] [output_path]

Parameter	Description
[input_path]	Path to SCSS file or directory (relative to current working directory)
[output_path]	Output path for CSS + source maps (defaults to css/ if not provided)

Note

Files are processed recursively by default unless -R or --no-recursion is passed.

Add to your package.json:

{
  "scripts": {
    "build:css": "scss-to-css [options]"
  }
}

Then run:

npm run build:css

---

📋 Example Commands

Current directory (outputs to css/): scss-to-css Specific directory: scss-to-css path/to/your/directory

Specific file: scss-to-css path/to/your/file.scss Custom output: scss-to-css input_folder output_folder

Note: Output CSS is minified unless -M or --no-minify is passed.

---

🎛️ Command Line Options

Boolean Options

Option	Description
-n, --dry-run	Don't compile, just show which files will be processed
-d, --include-dotfolders	Include dotfolders in file search
-S, --no-source-maps	Prevent source map generation
-M, --no-minify	Disable CSS minification
-R, --no-recursion	Disable recursive file searching
-c, --copy	Copy to clipboard instead of writing to file (single file only)
-q, --quiet	Suppress all logging except errors

Parameter Options

Option	Description
--ignore-files="file1.scss,file2.scss"	Files to exclude from compilation
--comment="Your comment"	Prepend header comment to CSS (use \n for line breaks)

Info Commands

Command	Description
-h, --help	Display help screen
-v, --version	Show version number

---

🔌 API Usage

Import scss-to-css into your app as ESM or CommonJS:

ESM (Node.js 14+):

import * as scssToCSS from '@adamlui/scss-to-css';

CommonJS:

const scssToCSS = require('@adamlui/scss-to-css');

---

compile(input[, options])

💡 Compiles SCSS based on the string input supplied.

Source Code Input

const srcCode = 'h1 { font-size: 40px; code { font-face: Roboto Mono }}';
const result = scssToCSS.compile(srcCode);

console.log(result.error); // undefined if no error
console.log(result.code);  // 'h1{font-size:40px}h1 code{font-face:Roboto Mono}'

File Path Input

Returns object containing srcPath + code + srcMap + error.

Directory Path Input

Searches for SCSS files recursively and returns array of result objects:

const results = scssToCSS.compile('.');
results.forEach(result => console.log(result.srcPath));
console.log(results[1].code); // Compiled CSS from 2nd file

Options

// Example: Return unminified CSS
scssToCSS.compile(inputDir, { minify: false });

Option	Type	Description	Default
recursive	Boolean	Recursively search for nested files	true
verbose	Boolean	Show logging in console/terminal	true
dotFolders	Boolean	Include dotfolders in file search	false
minify	Boolean	Minify output CSS	true
sourceMaps	Boolean	Generate CSS source maps	true
ignoreFiles	Array	Files (by name) to exclude from compilation	[]
comment	String	Header comment to prepend (use \n for line breaks)	''

---

findSCSS(searchDir[, options])

💡 Searches for all SCSS files within searchDir and returns an array of filepaths.

const results = scssToCSS.findSCSS('assets/scss', { recursive: false });
console.log(results);

/* Output:
[
  'E:\\js\\utils\\scss-to-css\\assets\\scss\\foo.scss',
  'E:\\js\\utils\\scss-to-css\\assets\\scss\\bar.scss'
]
*/

Options

Option	Type	Description	Default
recursive	Boolean	Recursively search for nested files	true
verbose	Boolean	Show logging in console/terminal	true
dotFolders	Boolean	Include dotfolders in file search	false
ignoreFiles	Array	Files (by name) to exclude from results	[]

🛠️ Related Utilities

🖼️ img-to-webp Recursively compress all images to WEBPs Download • Discuss

</> minify.js Recursively minify all JavaScript files Install • Readme • CLI • API • Discuss

---

More JavaScript utilities • Discuss • Back to top ↑