Vue.js 在 webpack 脚手架中使用 cssnext

Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能。

如果想使用下一代 css语法，即cssnext：

1. 安装依赖

npm install postcss-cssnext --save-dev

2. 修改 .postcssrc.js 文件

在 plugins 中添加一行，即

// https://github.com/michael-ciniawsky/postcss-load-config 
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-cssnext": {}, // 添加此行
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

3. 重启 npm run dev 即可

参考链接：

cssnext