kzima
5/17/2015 - 11:16 AM

autoprefixer in *.vue files, custom compiler setup

autoprefixer in *.vue files, custom compiler setup

vue.config.js
content_copyfile_download
var compiler = require('vue-loader');
var stylus = require('stylus');
var autoprefixer = require('autoprefixer-core');

module.exports = function(compiler) {

    // register a compile function for <style lang="stylus-prefixed">
    compiler.register({
        lang: 'stylus-prefixed',
        type: 'style',
        compile: function(content, cb) {
            stylus.render(content, {}, function(err, css) {
                var prefixed = autoprefixer.process(css).css;
                // transform the content...
                cb(err, prefixed);
            });
        }
    });
};
Readme.md
content_copyfile_download
  • Rendered
  • Source

quick setup

  • add css prefixer to your project "npm install autoprefixer-core --save-dev"
  • place vue.config.js next to your webpack config file in your root of the application

usage

  • in your *.vue files use it like this
// example-component.vue
<style lang="stylus-prefixed">
  .pane 
    display flex
</style>

<template>
  <div class="pane">{{msg}}</div>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

Enjoy!