To ease the transitioning from Compass (ruby/gem) to Libsass using Compass Mixins, this module provides some of Compass asset functions for node-sass and two "copy" functions for manage the assets.

NB Please note that the functions option of node-sass is still experimental (>= v3.0.0).

The follow functions are provided:

• inline-image Documantation, do not need to be defined the mime type.
• image-width Documentation.
• image-height Documentation.
• font-files Documentation.
• inline-font-files Documentation.
• copy-image Documentation.
• copy-font Documentation.

Installation

npm i -S[-D] node-sass-asset-manager

Configuration

The configuration is optional, but configure the plugin allow the developer to makes less mistakes and write less code.

Webpack config:

const sassAssetManager = require('sass-asset-manager');
 
...

module: {
  rules: [
    {
      test: /\.(css|sass|scss)?$/,
      exclude: [/node_modules/],
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            outputStyle: 'compressed',
            functions: assetManager({
                images: {
                  src_root: 'src/assets/imgs/',
                  dest_root: path.resolve(__dirname, '../public/'),
                  path_prefix: '/assets/imgs/',
                  http: 'http://mydomain.com',
                },
                fonts: {
                  src_root: 'src/assets/fonts/',
                  dest_root: path.resolve(__dirname, '../public/'),
                  path_prefix: '/assets/fonts/',
                  http: 'http://mydomain.com',
                },
            }),
            includePaths: [
                path.resolve(__dirname, './node_modules/compass-mixins/lib'),
              ],
          },
      },
      ],
    },
  ],
},

...

• embed_all if defined all the file described as $src in 'copy' functions will be embedded into the css output, all the other settings will be ignored.
• src_root path where the images are stored in the source app folder.
• dest_root path where in the filesystem will be copied the file. If "path_prefix" is defined, will complete the path where the file will be copied.
• path_prefix it will follow http in the css output path.
• http If defined it will be the first part in the css output.

source:

.my-class{	
	background-image: copy-image('background.png');
}

result:

.my-class{	
	background-image: url('http://mydomain.com/assets/imgs/background.png');
}

Copy functions

These functions allow the developer to copy the file defined in the first parameter into the path defined in the second one. Both parameters will considerate the preset defined in the plugin configuration.

• copy-image($src, $dest); This function copy the file described in $src path paramenter in the $dest path paramenter. The $dest paramenter is optional if path_prefix is defined in the plugin configutation and it will be added to this last in the css output if defined. If the path described in $dest starts with ~ the path portion described in path_prefix will be ignored.

• copy-font($src, $dest, $urlWrap); Same roles like copy-image, just $urlWrap (true by default), have to be turned to false if the function is used inside the font-files function as in the example below. If $dest is not defined because the path used is defined in path_prefix, $urlWrap it can be the second paramenter.

NB. The default font-face compass-mixin retutn a font-url() in the css output intead the standard url() function, so it is better use a custom version of the mixin just before use the functionality as below.

@mixin font-face(
  $name,
  $font-files,
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: url($eot);
      $font-files: url($iefont) unquote("format('eot')"), $font-files;
    }
    @if $weight { font-weight: $weight; }
    @if $style { font-style: $style; }
    src: $font-files;
  }
}

@include font-face(
  'MyFontFamily',
  font-files(
    copy-font('MyFont.woff2',false),    /* Super Modern Browsers */
    copy-font('MyFont.woff',false),     /* Pretty Modern Browsers */
    copy-font('MyFont.ttf',false),        /* Safari, Android, iOS */
    copy-font('MyFont.svg#FontName',false)  /* Legacy iOS */
  ),
  copy-font('MyFont.eot',false),        /* IE9 Compat Modes and IE6-IE8 */
  'normal',                             /* font-weight */
  'italic'                              /* font-style */
);