webpack - vue cli sass

vue webpack 2 autoprefixer para ie9+

Question

Usando Vue generado desde Vuecli con la construcción del paquete web. Hay mucha magia pasando. Lo que no puedo entender es cómo generar los prefijos de proveedor necesarios para IE.

Esto fue copiado del problema de Github: 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'']
    })
  ]
}

Ejemplo de componente contenedor simple

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;
}

Salida en línea esperada generada en la cabeza, (pero actualmente no recibe los prefijos -ms-flexbox o -webkit-)

<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>

Relacionado:

1. El autoprefixer webpack2 vue-cli no funciona en el archivo js cuando se requiere un archivo scss?

2. https://github.com/vuejs/vue-cli/issues/350 Solo usa autoprefixer en vue-loader.conf.js con las últimas 2 versiones (utilicé browsers: [''ie >= 9''] , no funcionó )

3. Posible solución : https://github.com/vuejs-templates/webpack/issues/600 Sin embargo, obtener errores del mapa fuente en la consola.

Agregado a 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
        })
      })
    }
...

Actualización 26-07-2017

Repo agregado aquí: https://github.com/sidouglas/vue-js-vendor-prefixes-bug

Actualización 03-08-2017

@Chris Camaratta

npm ERR! fetch failed http://uscavs-repo1:8081/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 uscavs-repo1:8081
npm ERR! fetch failed http://uscavs-repo1:8081/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 uscavs-repo1:8081
^Z  ░░░░░░░░░░░░░░░⸩ ⠙ cloneCurrentTree: WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 uscavs-repo1:8081
[2]  + 56232 suspended  npm i

Answer 1

Voy a tomar un toque diferente. La fuente de la plantilla Vue / Webpack está aquí . Se ve bastante diferente de lo que has publicado anteriormente. En la configuración de la plantilla, lo único que debe hacer es "usar" el campo "lista de navegadores" en package.json (ref .postcssrc.js ).

Como un experimento, intente:

1. Reemplazando su vue-loader.conf.js con este
2. Reemplaza build / utils.js con este
3. Asegúrese de tener un .postcssrc.js en la raíz de su proyecto (junto con package.json). Copia este .
4. Agregue una sección de lista de browserlist a su paquete.json. De nuevo, muestra aquí

Para obtener información sobre las reglas de BrowserList, mira aquí