소스 맵을 사용하여 .min.css를 변경하지 않고도 Dev Tools에서 .less 파일을 볼 수 있습니까?

Question

이 gruntfile을 사용하여 .less 파일을 .css 파일로 변경하고 있습니다. 나는 다음이 10 개 .CSS 파일을 생성합니다 열 개 .less 파일이있는 경우 내 개발을위한

module.exports = function (grunt) { 
    grunt.initConfig({ 

     less: { 
      development: { 
       files: [{ 
        expand: true, 
        cwd: 'assets/less', 
        src: ['*.less'], 
        dest: 'wwwroot/content/css/', 
        ext: '.css' 
       }] 
      }, 
      production: { 
       files: { 
        "wwwroot/content/css/script.css": ["assets/less/*.less"] 
       }, 
       options: { 
        cleancss: true 
       } 
      } 
     } 
    }); 
    grunt.loadNpmTasks("grunt-contrib-less"); 
}; 

빌드 및 I는 크롬 개발 도구와 쉽게 디버그이를 볼 수 있습니다.

내가 이것을하고있는 이유는 Chrome 개발 도구에서 10 개의 .css 파일을 디버깅하고 볼 수 있기 때문입니다.

제 생각은 정확합니까? 원본지도에 대해 들었지만 내 개발 빌드에서이 파일들을 어떻게 사용할 수 있습니까? 그렇다면이 파일들을 사용하면 여전히 .css 파일 이름이나 열등한 파일을 볼 수 있습니까?

Answer 1

TL, 당신의 모든 질문에 대한 DR 예) 당신의 Gruntfile와 소스지도를 사용하려면

는, 단순히이

less: { 
    development: { 
     options: { 
      sourceMap: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: 'assets/less', 
      src: ['*.less'], 
      dest: 'wwwroot/content/css/', 
      ext: '.css' 
     }] 
    }, 

같은 옵션을 추가 사용할 수있는 옵션에 대한 자세한 정보를 원하시면 grunt-contrib-less 페이지를 참조하십시오 . 어쩌면 작업 환경에 따라 sourceMapRootpath 옵션을 추가하여 파일의 위치를 ​​지정해야합니다. 결국, .css 파일 끝에는 주석 처리 된 줄이 있어야합니다. 그것은 원본지도입니다. Debug LESS With Chrome Developer Tools 및 Introduction to JavaScript Source Maps