[Vue CLI 3 配置系列] 如何支持 less

你們在編寫 .vue 文件的 style 的時候多會選擇採用預編譯樣式來加速開發效率

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  .img {
    border: 1px solid red;
  }
}
</style>

這裏咱們提一下，如何在新版 Vue CLI 中增長對 less 的支持

其實很簡單：須要在 package.json 中定義依賴：

"devDependencies": {
    "less": "^3.0.4",
    "less-loader": "^4.1.0"
}

而後安裝對應的依賴便可，是否是比以前版本的腳手架省去了不少配置

固然在使用 vue create 建立新項目的時候，也是能夠在命令行直接選擇的：

再裏面能夠選擇：