@imported sass files are taken straight from the src rather than the metalsmith pipeline

[MarcPorciuncula]

Hi, it seems to me that metalsmith-sass is reading @imported files straight from the source file rather than that found in the metalsmith pipeline.

In my project, I need to use absolute paths to my font files from my scss because I'm serving straight from the filesystem. To do this I'm using a handlebars expression that points to the root of the build folder. A simplified version of my project with additional test code looks like this.

// src/style/main.scss

@import "fonts/fonts";

.test::after {
  content: '{{testmessage}}';
}

// src/style/fonts/_fonts.scss

@font-face {
  font-family: 'Noto Sans';
  src: url('{{dist}}/fonts/NotoSansCJKjp-Regular.otf');
}

// build.js
import fs from 'fs';
import path from 'path';
import sass from 'metalsmith-sass';
import Handlebars from 'handlebars';
import Metalsmith from 'metalsmith';

Metalsmith(__dirname)
  .destination('./dist')
  .use((files, metalsmith, done) => {
    files['style\\main.scss'].contents = new Buffer(
      Handlebars.compile(files['style\\main.scss'].contents.toString())({testmessage: 'for some reason i want to dynamically insert things into my sass'})
    );
    files['style\\fonts\\_fonts.scss'].contents = new Buffer(
      Handlebars.compile(files['style\\fonts\\_fonts.scss'].contents.toString())({dist: path.join(__dirname, './dist')})
    );
    done();
  })
  .use(sass())
  .build(function(err) {
    if (err) {
      console.log(err);
    }
  });

This outputs something like

// dist/main.css

@font-face {
  font-family: 'Noto Sans';
  src: url('{{dist}}/style/fonts/NotoSansCJKjp-Regular.otf');
}

.test::after {
  content: '{{for some reason i want to dynamically insert things into my sass}}';
}

Capturing and logging the files in the metalsmith pipeline shows both main.scss and fonts.scss having been templated properly, with {{dist}} having been replaced with the path to the project build folder, but the output written to the dist folder seems to show that only the main file has been taken from the pipeline but the @imported file has been pulled from the source.

It would be really awesome and make much more sense with metalsmith to ensure that the files from the metalsmith pipeline are used rather than those from the source directories. It does seem that this would be hard to implement without modifying node-sass since it always reads from the disk for @imports.

For now I'll just have to put all of my font declarations in my main sass file.

[oupala]

I have the same problem as I'm using metalsmith-rename to rename resources (I rename css to scss in order to get them included in the main css file instead of being linked).

metalsmith-sass fails saying that the scss file cannot be found (and this if normal as it has been renamed to scss, but the scss files are only existing in metalsmith pipeline, not on the disk.