1

I am trying to get my metalsmith site to use Sass so I can use Foundation for sites. I have successfully got my site to build and use browser sync but unfortunately my .scss files aren't converting to css.

Below is my build.js file and my current "src" file structure is this. Can anyone see what I've done wrong. Looked through at least 20 files and tuts but getting nowhere, thanks.

  • src
  • assets
    • css
    • images
    • scripts
  • html
  • partials
  • scss
    • _settings.scss
    • _custom.scss
    • app.scss

  • template

    var consoleLog = false, // set true for metalsmith file and meta content logging
    devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production'),
    pkg = require('./package.json'),
    sass = require('metalsmith-sass'),
    metalsmith = require('metalsmith'),
    markdown   = require('metalsmith-markdown'),
    watch = require('metalsmith-watch'),
    layouts = require('metalsmith-layouts'),
    assets = require('metalsmith-assets'),
    // Use Browser Sync
    browsersync = devBuild ? require('metalsmith-browser-sync') : null,
    // Set up Directories
    dir = {
        base: __dirname + '/',
        lib: __dirname + '/lib/',
        source: './src/',
        dest: './build/'
    },
    //Template Config
    templateConfig = {
        engine: 'handlebars',
        directory: dir.source + 'template/',
        partials: dir.source + 'partials/',
        default: 'page.html'
    };


console.log((devBuild ? 'Development' : 'Production'), 'build, version', pkg.version);   

var ms = metalsmith(dir.base)          // instantiate Metalsmith in the cwd
  .source(dir.source + 'html/')        // specify source directory
  .destination(dir.dest)     // specify destination directory
  .use(markdown())             // transpile markdown into html
  .use(layouts(templateConfig)) // layout templating
  .clean(true)
  .use(watch({
       paths: {
       './src/**/*.md': '**/*',
       './src/template/**/*': '**/*',
       './src/scss/*.scss': '**/*' 
       }
     }))
  .use(sass({
      file: './src/scss/*.scss',
      includePaths : ['./node_modules/foundation-sites/scss'],
      outputDir: './src/assets/css/',
      outputStyle: "expanded"
    }))
  .use(assets({ // copy assets: CSS, images etc.
    source: dir.source + 'assets/',
    destination: './'
  }));

if (browsersync) ms.use(browsersync({     // start test server
  server: dir.dest,
  files:  [dir.source + '**/*']
}));

ms.build(function(err) {       // this is the actual build process
    if (err) throw err;    // throwing errors is required
  });
Just Andy
  • 21
  • 4
  • Try removing the `file` option from your sass config object. You also probably shouldn't be setting the output directory to the `./src` directory. – Steven Schobert Mar 16 '17 at 19:11

1 Answers1

0

I had a similar problem, the issue was with my app.scss file though.

At the top I had:

@import 'foundation';

but I hadn't also added underneath:

@include foundation-everything;

see here: https://github.com/zurb/foundation-sites/issues/7879

Once I did it all compiled as expected. Too late for you though maybe.

Fewster
  • 100
  • 1
  • 1
  • 10