Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vue webpack 2 autoprefixer for ie9+

Using Vue generated from Vuecli with the webpack build. There's a lot of magic going on. What I can't figure out is how to generate the vendor prefixes needed for IE.

This was copied from github issue: https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

vue-loader.conf.js

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
 
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('postcss-import')(),
    require('autoprefixer')({
      browsers: ['ie >= 9']
    })
  ]
}

Simple container component example

container/index.vue

<template>
    <div class="container">
        <slot></slot>
    </div>
</template>
<script>
    import './index.scss'
    export default {}
</script>

container/index.scss

// this is aliased in webpack.base.conf
@import "~styles/base-config";

.container {
  @include grid(); // this generates display:flex and border-box resets
  max-width: 100%;
  margin: 0 auto;
}

Expected inline output generated in the head, (but currently don't get -ms-flexbox or -webkit- prefixes )

<style> 
.container {
   -webkit-box-sizing: border-box; // not generated
   box-sizing: border-box; 
   display: -webkit-box;  // not generated
   display: -ms-flexbox; // not generated
   display: flex;
   max-width: 100%;
   margin: 0 auto;
}
</style>

Related:

  1. webpack2 vue-cli autoprefixer not work in js file when require scss file?

  2. https://github.com/vuejs/vue-cli/issues/350 Just uses autoprefixer in vue-loader.conf.js with last 2 versions ( I used browsers: ['ie >= 9'], didn't work )

  3. Potential solution: https://github.com/vuejs-templates/webpack/issues/600 However getting source map errors in the console.

Added to build/utils.js

// npm install postcss-loader first then edit:
...
  var postcssLoader = {
    loader : 'postcss-loader'
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader, postcssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
...

Update 26-07-2017

Added repo here: https://github.com/sidouglas/vue-js-vendor-prefixes-bug

Update 03-08-2017

@Chris Camaratta

npm ERR! fetch failed http://remote-server/artifactory/api/npm/npm-aggregator/vue/-/vue-2.4.2.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 remote-server
npm ERR! fetch failed http://remote-server/artifactory/api/npm/npm-aggregator/vue-router/-/vue-router-2.7.0.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 remote-server
cloneCurrentTree: WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 remote-server
[2]  + 56232 suspended  npm i
like image 526
Simon Avatar asked Jul 20 '17 07:07

Simon


1 Answers

I'm going to take a little different tact. The source for the Vue/Webpack template is here. It looks quite different than what you've got posted above. In the template's config the only thing you should have to do is "use "browserslist" field in package.json" (ref .postcssrc.js).

As an experiment, try:

  1. Replacing your vue-loader.conf.js with this one
  2. Replace build/utils.js with this one
  3. Ensure you have a .postcssrc.js in your project's root (alongside package.json). Copy this one.
  4. Add a browserlist section to your package.json. Again, sample here

For information on BrowserList rules, look here

like image 180
Chris Camaratta Avatar answered Nov 15 '22 23:11

Chris Camaratta