vue怎么全局引入less-Vue.js-PHP中文网

vue怎么全局引入less

下次还敢

发布： 2024-05-21 05:45:26

原创

720人浏览过

在 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

在 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 中引入：

Upscale

AI图片放大工具

查看详情

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',
          'css-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的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

适合Vue.js开发的代码格式化工具 Vue.js 中的过渡动画效果如何实现 Vue中export default如何配置组件的style Vue和Element-UI级联下拉框自定义样式结合 CSS 和 Vue 实现更高级的文字滚动动画