Question

我想让grunt编译我的sass的压缩版本。我可以让它编译一个或另一个但不能同时编译。我试过了：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

还有：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        },
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

但两者都没有奏效。解决方案是什么？

Answer 1

看看我在我的项目中采用的方法，我可能会犯错误，但我有类似的意图，为可读性创建一个文件，为 minification创建其他文件

sass: {
  appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}},
  appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}}
}

请注意，我为style和appStyles选择的appStylesMinified分别为expanded和compressed。此外，compressed版本采用新创建的app.css文件而不是main.scss来进一步创建app.min.css。

当我仍然处于开发模式时，我发现这个app.css在调试时也有一点用处。但是，当然，当一切准备就绪时，app.min.css从那里开始。

Answer 2

为什么要压缩saas文件，您可以在saas文件中直接使用@import，然后您的单个就绪，然后使用compress。只需创建类似main.scss的内容并导入其中的所有saas文件，然后压缩此文件。

编辑：

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'main1.css': 'main1.scss'
      }
    }
  }
});

Answer 3

我发现以下代码工作得很好。我没有依赖sass来输出具有不同压缩的多个文件，而是让sass输出紧凑样式，然后使用grunt-contrib-cssmin进一步压缩css。

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compact'
        },
        files: {
          'style.css': 'css/main.scss',
          'style1.css': 'css/main1.scss',
        }
      }
    },
    cssmin: {
      dist: {
        files: {
          'style.min.css': ['style.css'],
          'style1.min.css': ['style1.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['sass', 'cssmin']);

};

您甚至不需要紧凑选项。这将使输出css更容易阅读。

grunt + sass：同时输出2个css文件

3 个答案: