1

我正在尝试让我的金属匠网站使用 Sass,以便我可以将 Foundation 用于网站。我已经成功地让我的网站构建和使用浏览器同步,但不幸的是我的 .scss 文件没有转换为 css。

下面是我的 build.js 文件,我当前的“src”文件结构是这样的。谁能看到我做错了什么。浏览了至少 20 个文件和 tuts,但一无所获,谢谢。

  • 源代码
  • 资产
    • css
    • 图片
    • 脚本
  • html
  • 部分
  • scss
    • _settings.scss
    • _custom.scss
    • 应用程序.scss
  • 模板

    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
      });
    
4

1 回答 1

0

我有一个类似的问题,但问题出在我的 app.scss 文件上。

在顶部,我有:

@import 'foundation';

但我还没有在下面添加:

@include foundation-everything;

见这里:https ://github.com/zurb/foundation-sites/issues/7879

一旦我按预期完成了所有编译。不过也许对你来说太晚了。

于 2017-05-10T14:18:29.440 回答