手写VUE后台管理系统7 - 整合Less样式
整合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>