Question

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

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

   }
}

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

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的？我不是具体的专家，但这就是我做的......

DIR /

main.scss _nav.scss _vars.scss etc.

main.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

你可以使用＆＃34; grunt-sass-globbing＆＃34;。它将生成一个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

所以您需要做的是：在root 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"
                    }
                };

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

5 个答案:

第1步：创建导入文件

第2步：编译导入文件