1. 前言
最近用到less使用全局的 公共样式发现出了点问题
记录如下
有些错误解决后找不到记录了...
这块引入有问题的,先按照步骤操作一遍 看看
版本 和 插件是否安装 基本就能解决问题了
2. 引入方式
App.vue style里面
2种引用方式 选一个即可
~代表作为 模块解析
@import "./assets/css/common.less; @import "~@/assets/style/common.less";
main.js引入
import "./assets/css/common.less";
以上2种方式,样式可以全局共享,
但是里面定义的变量不行
3. 注意版本
尤其是
less的相关错误
"less": "^3.0.4", "less-loader": "^5.0.0",
4.style-resources-loader 安装 变量也可以访问
自动化导入样式文件(颜色,变量,mixin等)
vue add style-resources-loader
根据提示操作
按自己的需要选择 预处理器 安装
5. 配置 vue.config.js文件
根据自己的样式路径配置
const path = require('path') pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, './src/assets/css/common.less')] } }
6. 变量可以使用了 编译通过
common.less
@themeBlue: #409EFF;
Home.vue
header{ background-color: @themeBlue; }
7. 随机色 公共样式
@random255:`Math.ceil(Math.random()*255)`;
使用
<style lang="less" scoped> #one{ border:2px solid red; background: rgb(@random255,@random255,@random255); } </style>
8. 但是之前的随机数函数不能使用了,网上也没资料,结合自己之前的实现方式,最终锁定是版本问题
"less": "^2.7.3", "less-loader": "^5.0.0",
9. 总结预处理器的Loader
9.1 Sass
npm install -D sass-loader node-sass
9.2 Less
npm install -D less-loader less
9.3 Stylus
npm install -D stylus-loader stylus
10. 样式穿透
主要用来解决 使用第三方库时候的自带样式 重置问题
或者是 父组件修改子组件的 样式, 尤其当组件是第三方的时候
写法-1. css中使用
>>>深度选择器
<style scoped> 外层 >>> 第三方组件类名{ 样式 } </style>
实战 App.vue
<style scoped> #app >>>.test{ color: yellowgreen; } </style>
写法-2 less中使用
上述写法
>>>深度选择器 在css预处理器中识别不了语法
外层 /deep/ 第三方组件 { 样式 }
实战demo
scoped必须加上哦
<style lang="less" scoped> #app /deep/ .test{ color: yellowgreen; margin-bottom: 350px; } </style>
写法-3
<style lang="less"> #app::v-deep .test{ color: yellowgreen; margin-bottom: 350px; } </style>
