Sass Pack

Compile Sass to CSS.

• sass compiles Sass and SCSS files to CSS files.
• resolve-url-loader resolves relative URLs.
• postcss-loader transforms CSS further.
• stylelint-webpack-plugin lints source files.
• mini-css-extract-plugin generates CSS files.
• esbuild-loader minifies CSS files.

Overview

• Setup
• API
• Usage
• Internals
• License

Setup

Sass Pack is included in the complete edition.

Current Release

npm install --save-dev @packmule/sass-pack sass stylelint

Nightly Build

npm install --save-dev @packmule/sass-pack@nightly sass stylelint

API

Methods

include(glob: string)
Configure files to be processed. If not used, all files will be compiled.

importer(importer: Function)
Register a custom Sass importer.

modules()
Enable CSS modules to be used. By default modules are disabled.

Hints

View the packmule hints documentation for more information.

• optimize - Enable or disable minification of the generated CSS.
• map - Control generation of source maps for the generated CSS.
• lint - Define whether code linting via stylelint is enabled or not.
• fix - Define whether code fixing via stylelint is enabled or not.
• extract - Use to determine if actual CSS files are being created.
• hash - Configure whether file name hashing is enabled or not.

Usage

View the packmule API documentation for general usage patterns.

Basic Usage

Add the pack to be used by packmule to compile Sass to CSS.

import Packmule from '@packmule/core';
import SassPack from '@packmule/sass-pack';

const packmule = new Packmule();
const pack = new SassPack();

packmule.add(pack);

return packmule.generate();

Sass Importer

Register a custom Sass importer.

import Packmule from '@packmule/core';
import SassPack from '@packmule/sass-pack';
import MagicImporter from 'node-sass-magic-importer';

const packmule = new Packmule();
const pack = new SassPack().importer(MagicImporter());

packmule.add(pack);

return packmule.generate();

CSS Modules

Enable CSS modules.

import Packmule from '@packmule/core';
import SassPack from '@packmule/sass-pack';

const packmule = new Packmule();
const pack = new SassPack().modules();

packmule.add(pack);

return packmule.generate();

Direct Generation

Use packmule.generate() to directly generate the pack configuration. This is useful for debugging and manipulating the configuration.

import Packmule from '@packmule/core';
import SassPack from '@packmule/sass-pack';

const packmule = new Packmule();
const pack = new SassPack();

const configuration = packmule.generate(pack);

Specific Hints

Set different/explicit hints for the Sass pack.

import Packmule from '@packmule/core';
import SassPack from '@packmule/sass-pack';

const packmule = new Packmule();
const pack = new SassPack();

packmule.add(pack, {
    map: false,
    fix: false,
});

return packmule.generate();

Internals

License

MIT