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