Question

我想知道是否可以在同一个项目中同时使用LESS和SCSS，这意味着使用Grunt将两种类型的文件压缩并缩小为一个css文件？我问的原因是我计划使用MMenu（用SCSS编写）和我已经开始用LESS编写的项目。或者我必须将MMenu SCSS文件转换为更少？我发现了以下Grunt任务https://www.npmjs.org/package/grunt-refactor，但由于存在一些兼容性问题，我不确定是否值得付出努力。

是否有人在同一个gruntfile中同时使用LESS和SCSS？

如果有人愿意帮忙的话，这是我的grunt文件。

'use strict';
module.exports = function(grunt) {

grunt.initConfig({
jshint: {
  options: {
    jshintrc: '.jshintrc'
  },
  all: [
    'Gruntfile.js',
    'assets/js/*.js',
    '!assets/js/scripts.min.js'
  ]
},
less: {
  dist: {
    files: {
      'assets/css/main.min.css': [
        'assets/less/app.less'
      ]
    },
    options: {
      compress: true,
      // LESS source map
      // To enable, set sourceMap to true and update sourceMapRootpath based on your install
      sourceMap: true,
      sourceMapFilename: 'assets/css/main.min.css.map',
      sourceMapRootpath: '/app/themes/thenewstheme/'
    }
  }
},
uglify: {
  dist: {
    files: {
      'assets/js/scripts.min.js': [
        'assets/js/plugins/bootstrap/transition.js',
        'assets/js/plugins/bootstrap/alert.js',
        'assets/js/plugins/bootstrap/button.js',
        'assets/js/plugins/bootstrap/carousel.js',
        'assets/js/plugins/bootstrap/collapse.js',
        'assets/js/plugins/bootstrap/dropdown.js',
        'assets/js/plugins/bootstrap/modal.js',
        'assets/js/plugins/bootstrap/tooltip.js',
        'assets/js/plugins/bootstrap/popover.js',
        'assets/js/plugins/bootstrap/scrollspy.js',
        'assets/js/plugins/bootstrap/tab.js',
        'assets/js/plugins/bootstrap/affix.js',
        'assets/js/plugins/*.js',
        'assets/js/_*.js'
      ]
    },
    options: {
      // JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
       sourceMap: 'assets/js/scripts.min.js.map',
       sourceMappingURL: '/app/themes/thenewstheme/assets/js/scripts.min.js.map'
    }
  }
},
version: {
  options: {
    file: 'lib/scripts.php',
    css: 'assets/css/main.min.css',
    cssHandle: 'roots_main',
    js: 'assets/js/scripts.min.js',
    jsHandle: 'roots_scripts'
  }
},
watch: {
  less: {
    files: [
      'assets/less/*.less',
      'assets/less/bootstrap/*.less'
    ],
    tasks: ['less', 'version']
  },
  js: {
    files: [
      '<%= jshint.all %>'
    ],
    tasks: ['jshint', 'uglify', 'version']
  },
  livereload: {
    // Browser live reloading
    // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
    options: {
      livereload: true
    },
    files: [
      'assets/css/main.min.css',
      'assets/js/scripts.min.js',
      'templates/*.php',
      '*.php'
    ]
  }
},
clean: {
  dist: [
    'assets/css/main.min.css',
    'assets/js/scripts.min.js'
  ]
}
});

// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-wp-version');

// Register tasks
grunt.registerTask('default', [
'clean',
'less',
'uglify',
'version'
]);
grunt.registerTask('dev', [
'watch'
]);

};

Answer 1

简短回答是是，你可以。

但是因为SASS和LESS的语法略有不同 - 这种差异只会随着我的输入而增长，所以最终必须单独维护每个。

如果这不是问题而你宁愿尝试，我建议使用Compass（grunt-contrib-compass）来处理SASS。

我还要确保每个人尽可能地分开。如果您仍希望共享css文件夹以输出两者，请计算一种命名模式，以防止LESS的输出覆盖SASS＆＃ 39; s。

在此基础上，您可以将结果CSS文件（由每个任务单独编译）连接成一个文件，借助另一个任务，如grunt-contrib-cssmin。

我可以在同一个项目中同时使用LESS和SCSS，还是必须转换？

1 个答案: