vue项目中样式重置 自动注入less
目录
重置样式
公共样式
项目样式
自动注入less
重置样式
normalize.css
- 保留有用的默认值，与许多 CSS 重置不同。
- 标准化各种元素的样式。
- 纠正错误和常见的浏览器不一致问题。
- 通过细微的修改提高可用性。
- 使用详细注释解释代码的作用。
下载包
npm i normalize.css在main.js中引入
import 'normalize.css'引入成功后 可通过控制台样式查看
公共样式
放在src/style/common.less 注意不是全部可复用 根据自己项目需求
项目中很有样式是公用的，比如我们常见的配色色值，为了方便后期修改维护方便，我们会把它们定义成变量，统一定义在less文件中，然后在需要用到的组件中引入使用。
// 重置样式
* {box-sizing: border-box;}html {height: 100%;font-size: 14px;}body {height: 100%;color: #333;min-width: 1240px;font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif}ul,h1,h3,h4,p,dl,dd {padding: 0;margin: 0;}a {text-decoration: none;color: #333;outline: none;}i {font-style: normal;}input[type="text"],input[type="search"],input[type="password"], input[type="checkbox"]{padding: 0;outline: none;border: none;-webkit-appearance: none;&::placeholder{color: #ccc;}}img {max-width: 100%;max-height: 100%;vertical-align: middle;}ul {list-style: none;}#app {background: #f5f5f5;user-select: none;}.container {width: 1240px;margin: 0 auto;position: relative;}.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.ellipsis-2 {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}.fl {float: left;}.fr {float: right;}.clearfix:after {content: ".";display: block;visibility: hidden;height: 0;line-height: 0;clear: both;}在mian.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+ import 'normalize.css'
+ import '@/style/common.less'
createApp(App).use(store).use(router).mount('#app')
项目样式
我们经常会在项目中 留一些可复用的样式变量 variables.less
// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;// 鼠标经过上移阴影动画
.hoverShadow () {transition: all .5s;&:hover {transform: translate3d(0,-3px,0);box-shadow: 0 3px 8px rgba(0,0,0,0.2);}}在.vue文件中使用
<style lang="less">
@import '~@/styles/variables.less';
@import '~@/styles/mixins.less';
.container{color: @xtxColor;.hoverShadow();
}
</style>自动注入less
如果我们每个文件都需要手动去引好多个文件会很繁琐 所以我们使用vuecli的style-resoures-loader插件来完成自动注入
vuecli的插件，不是npm包
1.输入配置命令
vue add style-resources-loader2. y less
3. vue.config.js自动添加了配置 添加路径在patterns
+ const path = require('path')
module.exports = {pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [
+ path.join(__dirname, './src/styles/variables.less'),
+ path.join(__dirname, './src/styles/mixins.less')]}}
}__dirname 代表当路径 也就是当前的vue.config.js文件当前路径位置(根路径)
修改配置文件后 重启项目
不需要引其他less文件了 只写样式就可以了
<style lang="less">
.container{color: @xtxColor;.hoverShadow();
}
</style>补充 引入less报错
引入 less的 两种方式
在引入文件时@不管用可以试试 ~@ 引用
@import '~@/styles/variables.less';
@import url('./styles/mixins.less')Can't resolve '@/style/mixins.less' in 'E:\.....
无法读取less文件 一般是路径写错了
Missing semi-colon or unrecognised media features on import
引入时没加分号
vue项目中样式重置 自动注入less相关推荐
- vue项目中自动拉取更新Iconfont（阿里巴巴图标库）
在vue项目中使用 iconfont图标库,网上的栗子很多,这边就随手给一个,点这里 上面的解决了,那我就很苦恼,我每次添加 或删除 或更新图标库,需要重新下载?自己手动去覆盖吗?我是拒绝的.so,自 ...
- 利用vscode stylelint插件实现ctrl+s自动格式化vue项目中的css、scss
vscode stylelint使用 1. vscode stylelint插件安装及配置 vscode stylelint插件版本 vscode中配置stylelint和开启自动修复 2. 安装st ...
- vue 项目中 自动生成 二维码
vue 项目中 自动生成 二维码 最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
- Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
- vue项目中css样式如何使用data中定义的动态变量
vue项目中css样式如何使用data中定义的动态变量 直接上代码: 在这里是因为需要根据接口返回的数据控制对应父级盒子的高度以及子级盒子的宽度,所以需要用到动态样式.具体代码如下: <temp ...
- vue项目中自动生成二维码
vue项目中自动生成二维码 我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- vue项目中改变滚动条样式
vue项目中改变浏览器滚动条的样式,推荐一个超级好用的vue组件: vuescroll.js
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
最新文章
- cygwin和mingw编译软件的疑问
- python3 异步错误 asyncio.Semaphore RuntimeError: Task got Future attached to a different loop
- python 机器学习中，clf变量代表的是什么意思？（clf = classifier的缩写 分类器）
- poj 2769 感觉♂良好 （单调栈）
- Xtract 实现 VMware Vsphere 迁主机到 Nutanix cluster
- git 检查更新文件_Git通过差异比对快速打包待更新文件（SQL）
- / ./ ../ 的区别
- 分布式队列编程：模型、实战
- C++远航之封装篇——数据的封装
- 应用管理系列 — 怎么管理Sybase数据库
- 【OCP|052】OCP题库更新，052最新考题及答案整理-第10题
- windows无法格式化u盘_windows无法完成格式化怎么办
- MySQL源码—线程篇
- 关于Excel导入SqlServer报错的解决
- ORACLE建表sql
- Debussy5.4免费分享
- .Net Core 登陆验证
- 深度学习入门（转）（备用）
- 如何构建用户画像，给用户打“标签”？
- MDX的实例讲解（排名前15的小例子）