标签: grunt-contrib-sass

我正在尝试将多个.scss文件编译为单个CSS文件.这实际上有效,但只抓取第一个文件...

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/*.scss'
     }

   }
}

我们没有安装ruby,所以grunt-contrib-sass不是一个选项.我在Stylus中做同样的事情......

stylus: {
  compile : {
    files : {
      'css/g.css' : 'stylus/*.styl'
    }
  }
}

我正在使用Yeoman.升级到Yosemite后,任务grunt server并grunt build抛出此错误:

/Users/rogerfuentes/Documents/Web/Kelios/test/node_modules/grunt-contrib-compass/node_modules/tmp/lib/tmp.js:261
throw err;
        ^
Error: spawn ENOENT
    at errnoException (child_process.js:1001:11)
    at Process.ChildProcess._handle.onexit (child_process.js:792:34)

导致此错误的原因是什么,以及如何修复？

我正在为sass进行css处理实现grunt插件,但有两个选项可用grunt-contrib-sass和grunt-sass.我在互联网上搜索但无法找到任何相关的答案,grunt-contrib-sass和grunt-sass有什么区别,哪一个更好？

我正在为我的项目编写一个笨拙的任务文件。我已经sass在其中定义了任务，并安装了所有必需的依赖项。我可以在朋友计算机上运行相同的gruntfile，但是在我的计算机上，sass任务会产生此错误。

Running "sass:dist" (sass) task
Syntax error: Invalid CSS after "      webkit-image": expected ")", was ": -webkit- + $p..."
        on line 21 of /home/chitrank/Documents/shaastr/frontend/frontend/frontend/app/minovate/bower_components/bourbon/dist/helpers/_linear-angle-parser.scss
        from line 10 of /home/chitrank/Documents/shaastr/frontend/frontend/frontend/app/minovate/bower_components/bourbon/dist/_bourbon.scss
        from line 6 of app/sass/main.scss
  Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.

Aborted due to warnings.

由于这个错误，我无法执行sass任务，需要在我朋友的计算机上执行。我还添加了Gruntfile.js，以更好地概述我的grunt任务及其工作方式，请看一看。

'use strict';

module.exports = function (grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);


  // Time how long tasks take. Can help when optimizing build times …

我的Grunt设置使用sass将我的.scss文件编译为src/.css和cssmin以将我的src / .css文件组合并缩小为main.css.

我想在SASS中使用新的sourcemap功能,但是我不确定它是否真的会为我做任何事情,因为cssmin会把我所有的css文件都放到main.css中.

有没有人对此有任何见解？

我也是,现在试图关闭grunt-contrib-sass中的源图,它不会采取.这是我的Gruntfile.js中的相关代码:

sass: {
  dist: {
    options: {
      sourcemap: 'none'
    },
    files: [{
      expand: true,
      cwd: 'stylesheets/scss',
      src: ['**/*.scss'],
      dest: 'stylesheets/src',
      ext: '.css'
    }]
  }
},

来自:github.com/gruntjs/grunt-contrib-sass

这是一个棘手的问题需要解释,我会尽力做到尽可能彻底:

我的设置 - 使用Jekyllrb生成器

我按照Zurb的说明,采用了Jekyllrb Yeoman发电机,并以最基本的方式(仅使用Sass文件)将Zurb的Foundation 5集成到其中.

我在grunt.js中的Sass路径如下:

loadPath: 'app/_bower_components/foundation/scss'

在我的/ _scss我有:

app.scss
_settings.scss

在app.scss中 - 我包含了许多基础组件(例如手风琴,类型,标签等).每个人都带来一套全球风格.这些样式包含在以下内容中:

@include exports("global") { ... }

根据这个链接:

"当包含在SASS模块中时,如果在其他地方调用@import,sass-import-once将阻止样式被复制.这很酷,因为它允许每个SASS文件声明它自己的依赖项.这促进了封装并允许模块独立如果需要的话."

我的Grunt.js

// Generated on 2014-09-28 using generator-jekyllrb 1.2.1
'use strict';

// Directory reference:
//   css: css
//   sass: _scss
//   javascript: scripts
//   images: img
//   fonts: fonts

module.exports = function (grunt) {
  // Show elapsed time after tasks run
  require('time-grunt')(grunt);
  // Load all Grunt tasks
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    // Configurable …

我启用了 CSS 源映射，但 Google Chrome 的行为就像它们被禁用一样。在我查看的所有资源中，我需要做的就是在 DevTools 首选项中启用源映射。它显然在那里启用：

源映射位于我的 CCS 文件旁边，如下所示：

在 DevTools > Elements > Styles 中，只有 CSS 文件，没有 SCSS 或 SASS：

这是我在 Gruntfile.js 中的 grunt-contrib-sass 配置：

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.css', '**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css',
                sourcemap: 'auto',
            }],
            options: {
            }
        }
    },

该站点通过grunt serveOSX 提供服务，源映射由 grunt-contrib-sass 生成。

真正奇怪的是，我有 99% 的把握确定我第一次设置后就看到它正常工作了一次。在那之后我没有改变任何东西......

尝试调试的下一步是什么？我是否应该能够查看 Chrome 是否正在向.map文件发出（失败？）请求？我错过了什么吗？

更新：我想我已经确定地图没有被加载，因为 sourceMappingURL 不存在于编译的 CSS 中。我为此开辟了一个新问题。

突然间，我的 grunt-contrib-sass 任务Could not find an option named "sourcemap"在构建时抛出错误。我目前安装了 sass 3.5.1 并使用 grunt-contrib-sass 1.0.0。有什么想法可能导致这种情况吗？这是我看到的输出：

Could not find an option named "sourcemap".
Usage: dart-sass <input>
-s, --style         Output style.
                    [expanded (default)]
-c, --[no-]color    Whether to emit terminal colors.
    --[no-]trace    Print full Dart stack traces for exceptions.
-h, --help          Print this usage information.
    --version       Print the version of Dart Sass.
Warning: Exited with error code 64 Used --force, continuing.
Done, but with warnings.
Process terminated with code 0.

而且，这并不是编译 CSS。想法？