vue中less的写法

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

文章标签写法

vue 中 less 的写法

Vue.js 中使用 Less 是一种常见的做法，它允许在 Vue 组件中使用 Less 样式表。以下是如何在 Vue 中使用 Less：

1. 安装 Less 编译器

npm install --save-dev less less-loader

2. 在 vue.config.js 中配置

在 vue.config.js 文件中，添加以下配置：

立即学习“前端免费学习笔记（深入）”；

module.exports = {  css: {    loaderOptions: {      less: {        // 若有 less 文件中的路径指向其他 less 文件，需要指定 less 文件所在的路径        lessOptions: {          paths: [path.resolve(__dirname, 'src', 'less')]        }      }    }  }};

3. 创建 Less 样式表

在 src 目录下创建一个 .less 文件，例如 style.less：

body {  background-color: #f5f5f5;}

4. 在 Vue 组件中引入 Less

在 Vue 组件的标签中，使用 lang="less" 属性来指定该样式表是 Less：

<template><div class="hello">    <h1>{{ msg }}</h1>  </div></template><style lang="less">@import "@/style.less";.hello {  color: red;}</style>

5. 编译 Less

在开发过程中，可以使用 npm run serve 命令启动一个开发服务器，它将自动监听并编译 Less 文件。

在打包部署时，使用 npm run build 命令来构建项目，它将编译 Less 文件并将其包含在最终的构建中。

文章推荐

vue中less的写法

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

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

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

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

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