目錄

重置樣式

公共樣式

項目樣式

自動注入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

引入時沒加分號

總結

以上是生活随笔為你收集整理的vue项目中样式重置 自动注入less的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。