vue3 ts 使用less

1. 安装依赖

npm install --save-dev less less-loader

2. 配置 webpack

在 webpack 配置文件中添加 less-loader：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' },
        ],
      },
    ],
  },
  // ...
};

3. 在组件中使用 less

在组件的 style 标签中使用 lang 属性指定为 less：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style lang="less">
.hello {
  background-color: #f5f5f5;
}
</style>

4. 在 TypeScript 中使用 less

安装声明文件：

npm install --save-dev @types/less

在组件中导入 less 文件：

import { defineComponent } from 'vue';
import './HelloWorld.less';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
});