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