LESS/Grunt не записывает ссылку на исходную карту в конец скомпилированного CSS

Я использую grunt-contrib-less собрать мой .less файлы в одну таблицу стилей CSS. Все работает, кроме исходной карты, которую я не могу заставить работать ни при каких обстоятельствах!

Вот мой Gruntfile:

'use strict';

module.exports = function(grunt) {

// Force use of Unix newlines
grunt.util.linefeed = '\n';

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    project: {
        // Add entries to this array to create variables for use by Grunt
        app:        ['app'],
        server:     'http://mysite.app',

        // Components
        bower:      ['<%= project.app %>/bower_components'],
        bootstrap:  ['<%= project.bower %>/bootstrap'],

        // Custom Assets
        assets:     ['<%= project.app %>/assets'],
        css:        ['<%= project.assets %>/css'],
        less:       ['<%= project.assets %>/less'],
        js:         ['<%= project.assets %>/js']
    },
    less: {
        production: {
            options: {
                ieCompat:           true,
                sourceMap:          true,
                sourceMapFilename:  '<%= project.css %>/style.css.map',
                sourceMapURL:       '<%= project.server %>/assets/css/style.css.map',
                sourceMapBasepath:  'app',
                sourceMapRootpath:  '<%= project.server %>'
            },
            files: {
                '<%= project.css %>/style.css': '<%= project.less %>/style.less'
            }
        }
    },
    autoprefixer: {
        dist: {
            files: {
                '<%= project.assets %>/css/style.css': '<%= project.assets %>/css/style.css'
            }
        }
    },
    concat: {
        options: {
            separator: ';\n',
            sourceMap: true
        },
        plugins_head: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built-head.js file
            src: [
                '<%= project.bower %>/modernizr/modernizr.js'
            ],
            dest: '<%= project.js %>/built/plugins-built-head.js'
        },
        plugins: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built.js file
            src: [
                '<%= project.bootstrap %>/js/dropdown.js'
            ],
            dest: '<%= project.js %>/built/plugins-built.js'
        },
        custom: {
            // Add further custom-written javascript files to this array and
            // they will be concatenated in to the scripts-built.js file
            src: [
                '<%= project.js %>/scripts.js'
            ],
            dest: '<%= project.js %>/built/scripts-built.js'
        }
    },
    watch: {
        css: {
            files: [
                '<%= project.bootstrap %>/less/*.less',
                '<%= project.less %>/*.less'
            ],
            tasks: [
                'less',
                'autoprefixer'
            ],
            options: {
                livereload: true
            }
        },
        js: {
            files: [
                '<%= project.js %>/scripts.js'
            ],
            tasks: ['concat']
        },
        html: {
            files: [
                '<%= project.app %>/*.html'
            ],
            options: {
                livereload: true
            }
        }
    }
});

grunt.loadNpmTasks('grunt-run-grunt');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('default', [
    'watch'
]);

};

Происходит то, что Грант пишет правильно и правильно style.css.map файл, но он не записывает следующую строку в конец скомпилированного style.css файл:

/*# sourceMappingURL=http://mysite.app/assets/css/style.css.map */

Это одна строка, которая отсутствует. Все остальное компилируется и пишется правильно. Если я вручную добавлю эту строку в конец скомпилированного CSS, Chrome правильно подберет исходную карту, но она не будет записана.

Кроме того, попробуйте варианты, такие как sourceMapFileInline кажется, не имеет значения - файл никогда не пишется в строке.

Есть идеи?

1 ответ

Надеюсь, вы уже нашли решение. Это для других людей с той же проблемой:

  • Убедитесь, что карта ресурсов будет помещена в ту же папку, что и css.
  • Задавать sourceMapUrl только имя файла карты.
  • Это добавит следующую строку в ваш файл.css: /*# sourceMappingURL=default.css.map */

Вот настройки исходной карты в моем файле grunt:

sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"
Другие вопросы по тегам