vue怎么全局引入less

在 vue.js 中全局引入 less 有三种方法：使用 vue cli 插件：使用 vue-cli-plugin-style-resources 插件，在 src/styles 目录中定义变量和混入，并在 main.js 中引入。使用 less-loader：在 webpack.config.js 中配置 less-loader，并在 src/main.less 中定义 less 样式。使用 style-loader 和 less-loader：直接在 src/styles 目录中定义 les

如何在 Vue 应用中全局引入 LESS

在 Vue 中全局引入 LESS 的方法有几种：

1. 使用 Vue CLI

如果使用 Vue CLI 创建项目，可以使用 vue-cli-plugin-style-resources 插件。

安装插件：

vue add style-resources

登录后复制

在 src/styles/variables.less 中定义变量：

@primary-color: #409eff;

登录后复制

在 src/styles/mixins.less 中定义混入：

@import '~@/styles/variables.less';

.primary-color {
  color: @primary-color;
}

登录后复制登录后复制

在 main.js 中引入：

import './styles/mixins.less';

登录后复制

2. 使用 less-loader

手动安装 less-loader 和 less：

npm install less less-loader --save-dev

登录后复制

在 webpack.config.js 中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          'style-loader',
          '<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15716.html" target="_blank">css</a>-loader',
          'less-loader',
        ],
      },
    ],
  },
};

登录后复制

在 src/main.less 中定义 LESS 样式：

@import '~@/styles/variables.less';

.primary-color {
  color: @primary-color;
}

登录后复制登录后复制

3. 使用 style-loader 和 less-loader

手动安装 style-loader 和 less-loader：

npm install style-loader less-loader --save-dev

登录后复制

在 src/styles/global.less 中定义 LESS 样式：

@import '~@/styles/variables.less';

body {
  font-family: Arial, sans-serif;
}

.primary-color {
  color: @primary-color;
}

登录后复制

在 main.js 中引入：

import './styles/global.less';

登录后复制

以上就是vue怎么全局引入less的详细内容，更多请关注叮当号网其它相关文章！