当问别人会不会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);
}
}
// 产品状态
.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原样式，网页风格像bs4还行，不然改的也太多了！
第一次升级 自定义bs4
按官网的自己编译bs4，在nuxt.config.js的modules的下面配置bootstrapVue，官网：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
