동일한 프로젝트에서 LESS와 SCSS를 모두 사용할 수 있습니까? 아니면 변환해야합니까?

Question

같은 프로젝트에서 LESS와 SCSS를 모두 사용할 수 있는지 궁금합니다. Grunt를 사용하여 두 유형의 파일을 하나의 CSS 파일로 압축하고 축소하는 것이 좋습니다. 내가 묻는 이유는 내가 이미 시작한 프로젝트가있는 MMenu (SCSS로 작성된)를 덜 사용하기로 계획했기 때문입니다. 또는 MMenu SCSS 파일을 더 적은 파일로 변환해야합니까? 다음과 같은 GPT (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 파일 (각 작업별로 별도로 컴파일 됨)을 하나로 연결할 수 있습니다.