Vue 如何全局引入 Less

在Vue项目开发中，Less作为一种强大的CSS预处理器，能够极大地提升我们的样式编写效率。下面就来详细介绍一下在Vue项目中如何全局引入Less。

安装Less和Less-loader

我们需要在项目中安装Less和Less-loader。打开项目的终端，输入以下命令：

npm install less less-loader --save-dev

这两个依赖是处理Less文件所必需的，安装完成后，项目就具备了处理Less语法的能力。

配置Vue.config.js

在项目的根目录下找到 vue.config.js 文件，如果没有则需要手动创建一个。在该文件中添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 这里可以添加全局的less变量、混合等
        additionalData: `
          @import "@/styles/variables.less";
          @import "@/styles/mixins.less";
        `
      }
    }
  }
};

上述配置中的 additionalData 选项允许我们在每个Less文件的开头自动引入指定的Less文件。这里假设我们将全局变量和混合分别放在了 styles 目录下的 variables.less 和 mixins.less 文件中。

创建全局Less文件

按照上述配置，我们需要在项目的 src 目录下创建 styles 文件夹，并在其中创建 variables.less 和 mixins.less 文件。在 variables.less 中可以定义项目中常用的颜色、字体大小等变量，例如：

// 主色调
@primary-color: #1890ff;

// 字体大小
@font-size-base: 14px;

在 mixins.less 中可以定义一些常用的混合，比如：

// 居中混合
.center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

验证全局引入是否生效

完成以上步骤后，我们可以在项目的任何Vue组件的样式部分直接使用定义好的变量和混合，无需再重复引入。例如：

.my-class {
  color: @primary-color;
 .center();
}

通过以上步骤，我们就成功地在Vue项目中全局引入了Less，大大提高了样式编写的效率和可维护性。