从0打1 用node express vite搭建一个博客系统系列6

安装less
使用 Less 作为 CSS 预处理器有以下好处：

变量和混合（Mixins）：Less 允许您定义变量和混合，以便在整个样式表中重复使用。这样可以提高代码的可维护性和重用性，减少样式的冗余。

嵌套规则：Less 允许您在样式规则内部嵌套其他规则，减少了选择器的重复书写，使样式层级更加清晰，易于理解和维护。

运算和函数：Less 提供了运算符和函数，可以在样式表中进行数值计算、颜色操作等。这使得样式的编写更加灵活，可以根据需求进行动态计算和变换。

导入和模块化：Less 支持通过 @import 导入其他 Less 文件，使样式的模块化管理更加方便。您可以将样式按照模块划分，然后通过导入来组合和重用这些模块。

扩展性和可定制性：通过使用 Less，您可以轻松地为样式添加自定义的功能和扩展，编写自己的 Mixins、函数和样式库，满足特定的设计需求。

更好的兼容性：使用 Less 编写样式后，可以通过编译将其转换为标准的 CSS 代码，因此可以在所有支持 CSS 的浏览器中使用。这样可以确保样式在各种环境中具有一致的表现。

安装less
在 Vite 4 版本中使用 Less，可以按照以下步骤进行操作：

确保已经在项目中安装了 less 和 less-loader。如果尚未安装，可以使用以下命令进行安装：

npm install less less-loader --save-dev

在项目的根目录中找到 vite.config.js 文件（如果不存在，请创建一个），并添加以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 如果使用 less-loader 8.x 版本，请将此项设置为 true
      },
    },
  },
});

现在，您可以在项目中的 .vue 文件中使用 Less 语法了。只需将样式块的 lang 属性设置为 ‘less’，然后写入 Less 代码即可。例如：

<style lang="less">
  .my-component {
    color: red;
  }
</style>