初始化 scss less

1 项目通用样式初始化

  1 自定义重置样式代码 公用样式代码common.less通用样式2 normalize.cssnpm i normalize.cssnormalize.css 可以补充 common 样式  比如  body margin { margin: 0; }只给body设置颜色会传递给html( margin: 8px; 也看不出来) 分别设置就会 各自有自己的颜色3 main.js 中导入import 'normalize.css'import '@/assets/styles/common.less'4 或者 取消 3  在 vue.config.js  配置 全局sass变量   在 common 中 引入 @import 'normalize.css'; 或者 直接 vue.config.js--additionalData中配置css: {loaderOptions: {scss: {// 全局sass变量additionalData: `@import "~@/assets/styles/common.scss";@import "normalize.css";`,},},},还有其他的  ` ; ` 重点 ！！！  否则无效App.vue  中  style 必须有内容  // 也可<style scope lang="scss">//</style>自定义样式 变量  每次使用  必须导入@import "mixins.less";自动化导入--style-resources-loader步骤1 安装 插件 vue add style-resources-loader选择 less2 vue.config.js 中  哪些文件自动导入 使用绝对路径
pluginOptions: {'style-resources-loader': {preProcessor: 'less',哪些文件自动导入 使用绝对路径使用 path.join 来拼接完整路径patterns: [path.join(__dirname, './src/assets/styles/variables.less'),path.join(__dirname, './src/assets/styles/mixins.less'),],},},

src–assets–styles–common.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='number'],
input[type='checkbox'] {padding: 0;outline: none;border: none;-webkit-appearance: none;&::placeholder {color: #ccc;}
}// input改为number类型，去掉上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;
}
input[type='number'] {-moz-appearance: textfield;
}
img {max-width: 100%;max-height: 100%;vertical-align: middle;//  background: #ebebeb url(../assets/images/200.png) no-repeat center / contain;
}
ul {list-style: none;
}
#app {background: #f5f5f5;// none   无法选中user-select: auto;
}.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;
}
// 主页 新鲜好物骨架屏  离开
.fade {&-leave {&-active {position: absolute;width: 100%;transition: opacity 0.5s 0.2s;z-index: 1;}&-to {opacity: 0;}}
}
// 面包屑 动画
// 旧元素 0-->20px 新元素 20px-->0
.fade-right {&-enter-from,&-leave-to {opacity: 0;transform: translateX(20px);}&-enter-active,&-leave-active {transition: all 0.5s;}&-enter-to,&-leave-from {opacity: 1;transform: translateX(0);}
}
// 公用的  表单  Form, Field  样式
//  Form, Field -->xtx-form-->xtx-form-item
.xtx-form {width: 700px;margin: 0 auto;padding-left: 190px;line-height: 50px;&-item {display: flex;align-items: center;margin-bottom: 25px;.input {position: relative;// height: 50px;> i {position: absolute;left: 1px;top: 1px;width: 49px;height: 48px;color: #999;text-align: center;line-height: 48px;font-size: 18px;}// 输入框input {height: 50px;width: 320px;padding-left: 50px;border: 1px solid #e4e4e4;border-radius: 4px;&.errors {border-color: @priceColor;}&.active,&:focus {border-color: @xtxColor;}}// 短信验证码按钮.code {position: absolute;right: 1px;top: 1px;width: 80px;height: 48px;text-align: center;line-height: 48px;font-size: 14px;background: #f5f5f5;color: #666;cursor: pointer;}}//  错误提示.error {line-height: 28px;color: @priceColor;i {font-size: 16px;margin: 0 1px 0 8px;}}}.submit {display: block;width: 320px;height: 50px;color: #fff;font-size: 16px;text-align: center;background: @xtxColor;border-radius: 4px;&.disabled {background: #cfcdcd;}}
}

vue3 baseCss 初始化相关推荐

学习Vue3.0，先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...
执行 npm install -g @vue/cli 报错
目录一.问题描述二.解决方案 1.升级npm 2.清理缓存 3.再次安装一.问题描述准备使用vue3.0初始化一个项目,在使用 npm install -g @vue/cli 安装过程出现了异 ...
美团三面挂了....这个坑千万别踩！
昨天听说个事儿,觉得挺可惜的. 一个读者,面试美团的前端,技术面都过了,HR面给挂了.简单聊了下,才发现是面试经验不足,不懂得HR问题背后的意思,导致回答问题不在点上,被HR套路了.(比如HR问了他未 ...
vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
Vue3系列(一)之初始化项目及Vite 2.0配置
Vite 2.0配置一.vite介绍二.项目搭建- vue3.0 + vite2 三.配置留存 vite.config.js 一.vite介绍 vite官网:https://cn.vitejs.d ...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）一：项目规划及初始化
一.项目内容使用vue3+Layui实现通用管理系统前端,使用vue3+layui搭建系统UI界面,使用nodejs搭建模拟web服务器,使用echarts实现系统可视化模块,可以此项目为基础进 ...
【Vue3.0移动端项目--旅游网】--项目初始化搭建
多一些不为什么的坚持
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有 ...

vue3 baseCss 初始化

初始化 scss less

1 项目通用样式初始化

src–assets–styles–common.less

vue3 baseCss 初始化相关推荐

最新文章

热门文章

vue3 baseCss 初始化

初始化 scss less

1 项目 通用样式 初始化

src–assets–styles–common.less

vue3 baseCss 初始化相关推荐

最新文章

热门文章

1 项目通用样式初始化