手写VUE后台管理系统7 - 整合Less样式

---

Less（Leaner Style Sheets），是一门向后兼容的 CSS 扩展语言。
Less 官网：https://less.bootcss.com/

---

安装

yarn add less

安装完成就可以直接使用了

使用

• 以文件形式定义全局样式

在 assets 目录下创建 less 目录，所有的 less 文件都统一放置于该目录下。创建 index.less 作为引入文件，其它 less 文件都通过 index.less 进行引入，这样在项目中只需要引入 index.less 即可。

index.less

必须以 ; 结尾，不然会报语法错误

@import 'layout';

layout.less

h2 {
    font-weight: 700;
}

在 main.ts 中引入

import '@/assets/less/index.less'

• 在 style 标签中定义局部样式

在 vue 文件中添加如下内容，lang 设置为 less，则可以在 style 标签中使用 less 语法定义样式，scoped 表示 style 标签中的样式只能应用于当前页面。

<style scoped lang="less">
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
</style>