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)`;
使用
<style lang="less" scoped>
#one{
border:2px solid red;
background: rgb(@random255,@random255,@random255);
}
</style>
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中使用
>>>深度选择器
<style scoped>
外层 >>> 第三方组件类名{
样式
}
</style>
实战 App.vue
<style scoped>
#app >>>.test{
color: yellowgreen;
}
</style>
1.png
写法-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>
