按照vue官网安装完毕的vue项目,
可以在package.json文件里的devDependencies配置中,看到已经导入了autoprefixer组件。
"devDependencies"={
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
...
}
我们知道autoprefixer是一个loader,在一般的项目中,我们是在webpack.conf.js里,这样配置和引入它的:
module: {
loaders: [{
test: /\.css$/,
loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions'
}]
}
查看vue构建的项目里,build/build.js里的webpack引入的参数,启用的配置是:
var webpackConfig = require('./webpack.prod.conf')
跟着配置一直走,最终跟踪到 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('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
是的,终于发现他了,VUE没有直接使用loader配置autoprefixer,而是把它加入到vue-loader里。
如果你觉得它不生效,那可能是 last 2 versions这个默认配置太保守了,直接改成20吧哈哈。
关于vue-loader的介绍在此链接-vue-loader,更具体的关于其postcss的内容在此链接-vue-loader postcss
如果想加入诸如cssnet px2rem等其它postcss的组件,也是在这个地方加入便可。
postcss: [
require('autoprefixer')({browsers: ['last 2 versions'] }),
require('postcss-px2rem')({remUnit: 34.5}),
require('postcss-cssnext')()
]