vue-全局less-随机色-预处理器-样式穿透

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",

---

3.style-resources-loader 安装 变量也可以访问

自动化导入样式文件(颜色,变量,mixin等)

vue add style-resources-loader

根据提示操作
按自己的需要选择 预处理器 安装

---

4. 配置 vue.config.js文件

根据自己的样式路径配置

const path = require('path')

   pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/css/common.less')]
    }
  }

---

5. 变量可以使用了 编译通过

common.less

@themeBlue: #409EFF;

Home.vue

 header{
     background-color: @themeBlue;
  }

---

6. 随机色 公共样式

@random255:`Math.ceil(Math.random()*255)`;

使用

---

7. 但是之前的随机数函数不能使用了,网上也没资料,结合自己之前的实现方式,最终锁定是版本问题

"less": "^2.7.3",
 "less-loader": "^5.0.0",

---

8. 总结预处理器的Loader

8.1 Sass

npm install -D sass-loader node-sass

---

8.2 Less

npm install -D less-loader less

---

8.3 Stylus

npm install -D stylus-loader stylus

---

9. 样式穿透

主要用来解决 使用第三方库时候的自带样式 重置问题
或者是 父组件修改子组件的 样式, 尤其当组件是第三方的时候

写法-1. css中使用 >>> 深度选择器

---

实战 App.vue

1.png

---

写法-2 less中使用

上述写法 >>> 深度选择器 在css预处理器中识别不了
语法

外层 /deep/ 第三方组件 {
    样式
}

实战demo
scoped 必须加上哦

---

写法-3

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉