vue怎么全局引入less

百变鹏仔 3个月前 (09-25) #VUE

文章标签全局

在 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',          '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

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器