2016-01-26 20 views
2

Я обнаружил, что autofrefixer для веб-Essentials недостаточно авто - мне нужно вручную указать его, чтобы добавить префиксы. Также он не предлагает мне префиксы, когда я пишу .less или .scss.Visual Studio 2015 autoprefixer

Есть ли расширение или возможность автоматического добавления префиксов в css-компиляцию с .less или .scss stage?

Я пробовал расширение веб-компилятора, но не поддерживает префикс для sass и говорит, что он поддерживает префикс для менее, но я попытался включить autoprefix в compilerconfig.json при записи .less, и он не добавить что-нибудь.

Есть ли что-то для визуальной студии? Или, может быть, я должен сбросить его и использовать какой-нибудь редактор + gulp?

ответ

3

Я уверен, что там будет расширение, но для создания файла Grunt/Gulp не слишком много работы, чтобы выполнить компиляцию для вас. Затем запускает файл Runner Explorer. Написание ваших собственных даст вам контроль и гибкость, что расширение не будет.

Вот пример использования Grunt, взятый из моего поста на эту тему Getting started with Grunt, SASS and Task Runner Explorer

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

    grunt.loadNpmTasks('grunt-sass'); 
    grunt.loadNpmTasks('grunt-autoprefixer'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 

     // Sass 
     sass: { 
      options: { 
       sourceMap: true, // Create source map 
       outputStyle: 'compressed' // Minify output 
      }, 
      dist: { 
       files: [ 
        { 
         expand: true, // Recursive 
         cwd: "sass", // The startup directory 
         src: ["**/*.scss"], // Source files 
         dest: "stylesheets", // Destination 
         ext: ".css" // File extension 
        } 
       ] 
      } 
     }, 

     // Autoprefixer 
     autoprefixer: { 
      options: { 
       browsers: ['last 2 versions'], 
       map: true // Update source map (creates one if it can't find an existing map) 
      }, 

      // Prefix all files 
      multiple_files: { 
       src: 'stylesheets/**/*.css' 
      }, 
     }, 

     // Watch 
     watch: { 
      css: { 
       files: ['sass/**/*.scss'], 
       tasks: ['sass', 'autoprefixer'], 
       options: { 
        spawn: false 
       } 
      } 
     } 
    }); 

    grunt.registerTask('dev', ['watch']); 
    grunt.registerTask('prod', ['sass', 'autoprefixer']); 
};