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

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

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

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

告诉我进展如何！

Answer 2

这很简单。

假设你有这个包含 2 个 scss 文件的结构：

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

所以您需要做的是：在您的根 scss 文件夹中创建一个名为：ma​​in.scss 的文件并导入您的所有 scss 文件：

例如：main.scss 将具有：

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

现在使用 grunt-contrib-sass 并调用 ma​​in.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"
                    }
                };

Answer 3

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

Answer 4

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

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

第一步：创建导入文件

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 5

先运行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.

main.scss

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