vue项目中样式重置 自动注入less

Posted 2021-08-15 奥特曼　

目录

重置样式

公共样式

项目样式

自动注入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-loader

2. 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

引入时没加分号