如何使用grunt-sass编译多个scss文件

Question

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

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

我们没有安装 ruby，所以 grunt-contrib-sass 不是一种选择。我在手写笔中做同样的事情，就像这样......

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

Answer 1

先运行grunt-contrib-concat怎么样？

concat: {
       dist: {
         src: [
           'sass/*.scss',
         ],
         dest: 'sass/build.scss',
       }
     },
sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/build.scss'
     }
   }
}

然后执行任务：

grunt.registerTask('sass', ['concat', 'sass']);

编辑

您如何使用@import？我不是细节方面的专家，但这是我所做的......

迪尔/

main.scss
_nav.scss
_vars.scss
etc.

主.scss

@import "nav";
@import "vars";
etc.

Answer 2

我只想谈谈这个问题，因为我遇到了同样的问题，这实际上会起作用：

    sass: { // Task
       dist: {         
         files: [{
             // Set to true for recursive search
             expand: true,
             cwd: 'scss/',
             src: ['**/*.scss'],
             dest: 'css/',
             ext: '.css'
         }]
       }
    }

让我知道它是怎么回事！

Answer 3

您可以使用"grunt-sass-globbing"。它将生成一个 SCSS 文件，其中包含您在 Gruntfile 中指定的所有导入。https://www.npmjs.com/package/grunt-sass-globbing/

使用此选项，您可以保留源映射，而无需连接 SCSS 文件。

步骤 1：创建导入文件

sass_globbing: {
    your_target: {
        options: {
            useSingleQuotes: false,
            signature: '// Hello, World!'
        },
        files: {
            'imports.scss': 'partials/**/*.scss',
        }
    }
}

步骤 2：编译导入文件

sass: {
    options: {
        sourceMap: true
    },
    develop: {
        files: {
            'main.css': 'imports.scss'
        }
    }
}

Answer 4

如果不想使用 concat，可以指定目录中的所有文件。查看此示例：https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory

Answer 5

这

很简单。

假设您有包含 2 个 SCSS 文件的此结构：

   scss/
       core/file.scss
       templates/file2.scss
       main.scss

所以你需要做的是：在你的根SCSS文件夹中创建一个名为：main.scss的文件，并导入所有的SCSS文件：

例如：main.scss 将具有：

@import "core/file.scss"
@import "templates/file2.scss"

现在使用 grunt-contrib-sass 并调用 main.scss 文件：

完成:)

//Sass ===============================
            var sass;
            config.sass = sass = {};
                //production
                    sass.dist = {
                        options: { style: "compressed"}
                        , files: {
                            "public/stylesheets/myapp.production.css" : "sass/main.scss"
                        }
                    };
                //development env.
                    sass.dev = {
                    options: { style: "expanded", lineNumber: true}
                    , files: {
                        "public/stylesheets/myapp.development.css" : "sass/main.scss"
                    }
                };