當問別人會不會bootstrap4的時候浪箭，他們會說不就是link引入然后.btn就出來了控漠，bootstrap4也許沒那么簡單。全肮。敞咧。
bootstrap4太那個了，下文簡稱為bs4辜腺。本文主要介紹一下bs4在nuxt.js里的使用休建，其實不光在nuxt，只要是能編譯scss的項目里都是一樣的评疗。建議最好自己能使用webpack4搭建一套bootstrap4的后臺框架测砂，熟悉scss的使用。
下面以升級的方式來介紹我在項目里如何使用bs4壤巷。
初版 bs4入門級
- 新建項目的時候選擇 bootstrap
- nuxt.config.js 配置 css: [{ src: '~/assets/scss/app.scss' }]
- assets下新建scss/app.scss，這個scss文件跟bs4的scss文件毛關系也沒有瞧毙，全靠我的聰明才智寫了一些方法胧华，參考下：
// app.scss
// --------------------------------------------
$fc-white: #fff;
$fc-dark6: #666;
$fc-dark3: #333;
$fc-red: #dd3c3c;
$fc-green: #61b633;
$fc-blue: #53c3f1;
$fc-orange: #ef7619;
// 拓展按鈕、文字宙彪、背景顏色
$fc-colors: (
"white": $fc-white,
"dark6": $fc-dark6,
"dark3": $fc-dark3,
"red": $fc-red,
"green": $fc-green,
"blue": $fc-blue,
"orange": $fc-orange
);
@mixin fc-btn-color($parent, $color) {
#{$parent} {
color: $fc-white;
background-color: $color;
border-color: $color;
&:hover {
color: $fc-white;
background-color: darken($color, 7.5%);
border-color: darken($color, 10%);
}
}
}
@mixin fc-text-color($parent, $color) {
#{$parent} {
color: $color;
}
}
@mixin fc-bg-color($parent, $color) {
#{$parent} {
background-color: $color;
}
}
@each $color, $value in $fc-colors {
@include fc-btn-color(".fc-btn-#{$color}", $value);
@include fc-text-color(".fc-text-#{$color}", $value);
@include fc-bg-color(".fc-bg-#{$color}", $value);
}
// 縮小col的margin間距
@media (min-width: 768px) {
.row-m5 {
margin-left: -5px;
margin-right: -5px;
.col-md-3,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-9,
.col-md-m24 {
padding-left: 5px;
padding-right: 5px;
}
}
.row-m10 {
margin-left: -10px;
margin-right: -10px;
.col-md-3,
.col-md-6,
.col-md-9 {
padding-left: 10px;
padding-right: 10px;
}
}
}
// 去掉所有的focus陰影
@each $element in btn form-control {
.#{$element}:focus {
box-shadow: none;
}
}
// margin-top 拓展
@for $i from 1 through 10 {
.fc-mt-#{5 * $i} {
margin-top:(5px * $i);
}
}
// 產(chǎn)品狀態(tài)
.state {
position: absolute;
left: 0;
top: 0;
display: block;
width: 80px;
height: 32px;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
}
.state-sm {
text-align: center;
color: #fff;
padding: 2px 5px;
margin-right: 5px;
}
.state-green {
background-color: #65a219;
}
.state-red {
background-color: #dd3c3c;
}
自己寫樣式覆蓋bs4原樣式矩动，網(wǎng)頁風格像bs4還行，不然改的也太多了释漆！
第一次升級 自定義bs4
按官網(wǎng)的自己編譯bs4悲没，在nuxt.config.js的modules的下面配置bootstrapVue，官網(wǎng)：https://bootstrap-vue.js.org/docs
// nuxt.config.js
modules: [
...
'bootstrap-vue/nuxt'
],
bootstrapVue: {
bootstrapCSS: false, // Or `css: false`
bootstrapVueCSS: false // Or `bvCSS: false`
},
...
然后新建custom.scss來定義變量用來覆蓋bs4的_variables.scss里的變量
// _custom.scss
// --------------------------------------------
// 覆蓋bs4的變量
$blue: #52c3f1;
$green: #65a219;
$red: #dd3c3c;
$orange: #ef7619;
$enable-rounded: false;
$input-btn-focus-width: 0;
$input-btn-focus-color: transparent;
$font-size-base: 0.875rem;
// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';
這里只是nuxt處理了一下男图，普通項目我們一般導入
@import "custom";
@import "~bootstrap/scss/bootstrap";
到這里基本達到我們的要求了示姿，改bootstrap自帶的東西也方便了甜橱。
第二次升級 提取公用變量
上面我們在custom.scss里定義的變量基本上都是我們頁面頻繁使用的，因此我們把它分離出來栈戳，新建var.scss岂傲，此時：
// _var.scss
// 覆蓋bs4的變量
$blue: #52c3f1;
$green: #65a219;
$red: #dd3c3c;
$orange: #ef7619;
$enable-rounded: false;
$input-btn-focus-width: 0;
$input-btn-focus-color: transparent;
$font-size-base: 0.875rem;
// fc變量
$fc-test-color: #f00;
// fc方法
@mixin fc-text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// _custom.scss
// --------------------------------------------
@import "var";
// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';
// xxxx.vue
<style lang="scss">
@import "../../assets/scss/_var.scss";
p {
color: $red;
}
</style>
這樣在vue文件夾就可以直接導入var.scss使用了。
第三次升級 減少公用變量導入
上面每個組件導入var.scss也太麻煩了子檀，于是新建style.scss镊掖，把vue里的scss提取出去，目錄結構同pages褂痰，另外nuxt.config.js配置css: [{ src: '~/assets/scss/custom.scss' }, { src: '~/assets/scss/style.scss' }]
// style.scss
// 變量
@import "var";
// 布局
@import "layouts/layouts";
// 頁面
@import "pages/common";
@import "pages/index";
// _common.scss
a {
color: #212529;
transition: all 0.3s;
&:hover {
text-decoration: none;
color: $red;
}
}
...
目錄結構
scss
│ app.scss //廢棄
│ custom.scss
│ style.scss
│ tree.md
│ _var.scss
│
├─components
│ ├─index
│ │ _fc-banner.scss
│ │ _fc-panel.scss
│ │ ...
│ │
│ ├─detail
│ │ _fc-tabs.scss
│ │ _fc-tip.scss
│ │ _fc-view.scss
│ │
│ ├─...
│ │
│ └─public
│ │ _help-area.scss
│ │ _login-header.scss
│ │
│ ├─footer
│ │ _index.scss
│ │
│ └─header
│ _index.scss
│ _nav-bar.scss
│ _search-bar.scss
│ _top-bar.scss
│ _user-bar.scss
│
├─layouts
│ _layouts.scss
│
└─pages
_common.scss
_index.scss
_detail.scss
...
這樣我們就能輕輕松松使用自定義的變量了亩进！
第四次升級 使用bs4的方法
上面var.scss里我自定義了一個顏色fc-text-truncate，其實bs4的scss自帶了很多的方法缩歪，我們何不使用它們呢归薛？
在style.scss導入
// style.scss
// 變量
@import "var";
// 使用bs4的方法
@import "bootstrap/scss/_functions.scss";
@import "bootstrap/scss/_variables.scss";
@import "bootstrap/scss/_mixins.scss";
// 布局
@import "layouts/layouts";
// 頁面
@import "pages/common";
@import "pages/index";
你為什么會奇怪，不應該是后面的變量（variables.scss）覆蓋前面（var.scss）的嗎驶冒？其實是!default這個東西在起作用苟翻。
最后福利：圖片路徑問題
//scss圖片路徑
background: url('~@/assets/images/fc-banner01.jpg') no-repeat center top;
//js圖片路徑
imgSrc: require('~/assets/images/fc-banner01.jpg')
//vue圖片路徑
<img src="~assets/images/fc-logo.png" />
愛學習和搗鼓的小伙伴請加QQ群
- Nuxt踩坑之路：305707080
- Ionic4成神之路：670727319
- Angular7成仙之路：458732443
- Flutter成佛之路：784425971
