我可以在同一個項目中同時使用LESS和SCSS嗎？還是必須轉換？

Question

我想知道是否可以在同一個項目中同時使用LESS和SCSS，這意味着使用Grunt將兩種類型的文件壓縮和縮小到一個css文件中？我問的原因是我正在計劃使用我已經開始寫的LESS中的一個項目來使用MMenu（這是用SCSS編寫的）。或者我必須將MMenu SCSS文件轉換爲更少？我發現了下面的Grunt任務https://www.npmjs.org/package/grunt-refactor，但由於存在一些兼容性問題，我不確定它是否值得付出。

有沒有人在同一個gruntfile中使用LESS和SCSS的經驗？

這是我的gruntfile，如果任何人想幫助。

'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的輸出。

在此基礎上，您可以將生成的CSS文件（由每個任務單獨編譯）合併成一個文件，並在另一個任務（如grunt-contrib-cssmin）的幫助下進行合併。