10

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

1 Answer 1

3
+50

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

8
  • I updated the version of vue-cli. I copied over your files edits. I have .postcssrc.js in the root. I added browserlist rule ie 9 to package.json. No change in css output. In related step 3 ( see original question ) the user @KagamiChan edited utils.js with post-cssloader. That did have an effect, but was triggering all kinds of css map errors. Still stuck at this stage.
    – Simon
    Commented Jul 24, 2017 at 0:23
  • I can confirm that the out of the box webpack cli rules will honor the rules in package.json without having to modify utils.js. Something else is likely at fault here. Do you have a sample setup on github we can take a look at? Commented Jul 25, 2017 at 14:15
  • As per the question: i am loading the styles as per import './index.scss'. Vendor prefix do work inside vue style tags. Added repo shortly.
    – Simon
    Commented Jul 25, 2017 at 23:19
  • Wondering, if I should refactor me entire project to do it the "vue way". Could just import my scss inside of <style> tags and that would mitigate this issue completely. Will wait and see at this stage.
    – Simon
    Commented Jul 25, 2017 at 23:46
  • I built with the template defaults and your defaults. The diff is here: shareitdammit.com/37r4RdXi. That's what you're expecting right? If so, maybe this is an environmental problem. Which version of Node/NPM are you using? I'm at 6.10.3 / 3.10.10 for ref. Commented Jul 27, 2017 at 4:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.