Less
- 实现 : 让业务组件自动加入公共样式
- 解决的问题
- 开发的应用有些样式是公共的 , 为了做到统一修改的目的往往需要定义less变量
- 许多业务组件需要使用这些变量 , 如果手动引入使用代价较大
- 为了解决这个问题 , 采取自动导入方式 , 方便我们业务组件使用全局less变量
手动引入
- 准备样式变量文件(src/style/var.less)
-
// 主题 @xtxColor:#27BA9B; // 辅助 @helpColor:#E26237; // 成功 @sucColor:#1DC779; // 警告 @warnColor:#FFB302; // 价格 @priceColor:#CF4444;
- 手动引入的例子 , 在app.vue进行测试
-
<template> <div class="test">我是测试文字</div> </template> <style lang="less" scoped> // 引入我们定义了less变化的文件 // ~线不能丢 @import "~@/styles/var.less"; .test { color: @xtxColor; } </style>
- 如果进行修改时候 , 需要一个一个引入代价较大 , 所以自动引入
自动引入
- 使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中
- 在项目中安装style-resoures-loader包
- 安装成功之后 在vue.config.js进行配置
-
const path = require('path') module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ // 配置哪些文件需要自动导入 path.join(__dirname, './src/styles/var.less') ] } } }