在vue項目中使用less

---

安裝依賴

yarn add less less-loader css-loader style-loader -D

配置

在 build/webpack.base.conf.js 中配置 loader

module.exports = {
	...
	module: {
    rules: [{
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader', /* 順序不能變*/
      }]
}

開始使用

在使用時在style中添加屬性 lang="less" 之後就可以識別和編譯了。

<template>...<template>
<script>...</script>
<style lang="less" scoped>
.wrap {
  margin: 0;
  color: '#fe59df';

  .content {
    display: flex;
  }
}
</style>

編譯問題

如果在編譯的過程中出現問題，可以參考這篇文章😊→ less-loader 編譯出錯