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:
webpack2 vue-cli autoprefixer not work in js file when require scss file?
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 )
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
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:
browserlist
section to your package.json. Again,
sample here
For information on BrowserList rules, look here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With