讓vue-cli腳手架搭建的項目能夠處理vue文件中postcss語法

圖中&屬於postcss的語法，這樣書寫樣式能夠清楚的看出選擇器以前的層級關係，很是好用。

在利用vue-cli腳手架搭建的項目中若是不配置是不支持這種寫法的，這樣寫不會報錯，可是樣式不生效。

爲了讓項目中的vue文件支持這種寫法，須要在配置postcss-cssnext模塊。

往項目中安裝postcss-cssnext模塊；

npm install postcss-cssnext --save-dev

安裝完後，會在項目的package.json文件的devDependencies對象中看到postcss-cssnext模塊的信息：

在build文件夾下面的vue-loader.config.js文件中配置postcss-cssnext模塊；

首先經過require引入postcss-cssnext模塊，而後在導出的對象中配置postcss屬性便可；

重啓項目，postcss語法就會生效

 

 

在vue-cli3中如何安裝配置呢

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev 

{
  ··· 
  "postcss": {
    "plugins": {
      "postcss-cssnext": {}
    }
  },
  ···    
}

若是你項目中使用的是less，那麼安裝less就能夠了，不用獨自安裝postcss-cssnext模塊