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

Posted 2023-03-07

【中文标题】如何使用 grunt-sass 编译多个 scss 文件

【英文标题】：How to compile multiple scss files using grunt-sass

【发布时间】：2014-02-02 19:27:38

【问题描述】：

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

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

   

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

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

【问题讨论】：

我不会说它是准确的，但很接近，您是否只是使用导入，因为这对我来说不是一个选项。

另一个问题没有提到任何关于没有安装 Ruby 的事情，就像这个问题一样。但是，如果他们是骗子，我更愿意在这里看到一个答案，并将另一个作为一个骗子关闭，因为这个问题的措辞很明确。通常 Sass 需要 Ruby。让 Grunt 删除该依赖项是否正常？

有 2 个版本的 SASS，Ruby SASS 和 libSASS grunt-contrib-sass 使用 ruby​​ 运行，而 grunt-sass 使用 node-sass 使用 libsass。 libsass 应该更快，因为它基于 C(++?) 而不是 Ruby（基于 C 构建）。所以是的，我认为我需要根据另一篇文章研究动态扩展。

【参考方案1】：

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

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

告诉我进展如何！

【讨论】：

正是我想要的——我只是想将一个 scss 文件文件夹“批处理”到另一个转换为 CSS 文件的文件夹中，而不必列出所有文件。谢谢。

【参考方案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"
                    
                ;

【讨论】：

是的，但是如果我有 100 个其他 scss 文件而不是 2 个呢？那我得做 100 次进口 rt？

yeah :)，我建议你分项目，我喜欢这家伙的样子：github.com/douglasdeodato/lovelycss/tree/master/scss

【参考方案3】：

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

【讨论】：

"我们没有安装 ruby​​，所以 grunt-contrib-sass 不是一个选项" .

【参考方案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'
        
    

【参考方案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.

【讨论】：

我不知道为什么 OP 不能 使用@import，但是对于看到这个的人来说......我很确定这通常是首选方法。

我倾向于同意，我只是不熟悉 sass 框架如何处理链接（？）。我确实觉得很有趣，sass 的默认行为似乎是抛出异常，而 stylus 创建了太多的 css。

如果您有 *.scss 文件被模块分解，那么您不想将它们全部包含在您的 main.scss 中，您只希望 Grunt 通过 src/**/*.scss 找到它们

在您不想将所有样式表连接到一个文件中的情况下，您不会想使用导入。例如。您正在构建一个自定义 wordpress 应用程序，并希望为登录页面加载一个样式表，为管理员加载一个样式表，为前端加载一个样式表。

这种情况下的源地图呢？