Use less in vue3

Using Less (Leaner Style Sheets) in Vue 3 can be done with the following steps:

1. Install less and less-loader: First, you need to install Less and Less Loader dependencies. At the root of your Vue project, they can be installed using npm or yarn by running the following commands:

npm install less less-loader

or

yarn add less less-loader

2. Configure webpack: Vue CLI uses webpack to build projects by default. You need to add the Less Loader configuration to the webpack configuration.

Find vue.config.jsthe file (create it if it doesn't exist), and add the following:

module.exports = {
    
    
  css: {
    
    
    loaderOptions: {
    
    
      less: {
    
    
        lessOptions: {
    
    
          // 在这里添加自定义的Less配置
        },
      },
    },
  },
};

In lessOptionsthe object, you can add custom Less configuration options. For example, you can set global variables, modify the behavior of Less, etc.

3. Create Less files: Now, you can create Less files .lesswith suffix and include them in your Vue components.

In the tag of the Vue component <style>, @importimport your Less file using the directive, like this:

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<style lang="less">
@import "@/styles/your-styles.less";

/* 其他样式规则 */
</style>

In the above example, @/styles/your-styles.lessis your Less file path, adjust according to your project structure.

4. Use Less styles: Now you can use Less features in Vue components, such as variables, nested rules, etc. You can <style>write Less styles directly in tags.

For example, here's an example using Less variables and nested rules:

/* your-styles.less */

@primary-color: #ff0000;

.my-component {
  color: @primary-color;

  .nested-element {
    font-weight: bold;
  }
}

Use Less styles in Vue components:

<template>
  <div class="my-component">
    <span class="nested-element">Hello, World!</span>
  </div>
</template>

<style lang="less">
@import "@/styles/your-styles.less";

.my-component {
  /* 使用Less变量 */
  color: @primary-color;

  .nested-element {
    /* 使用嵌套规则 */
    font-weight: bold;
  }
}
</style>

This way, you can use Less in Vue 3 to write styles and apply them to components.

Please make sure to install and configure Less Loader correctly according to the above steps, and import Less files and use Less styles correctly.