基于Bootstrap 4.3.1版本:https://getbootstrap/docs/4.3/getting-started/introduction/
基于react脚手架来进行说明!
基础知识,针对bootstrap使用有一定了解的人群,对webpack有一定了解的人群,对react脚手架有了解。
一步步来,不要急,一口吞不了象。
运行终端:
1. cd 到一个目录。自行定义。
2. 安装脚手架。create-react-app bootstrap_customstyle
3.因为脚手架都给我们把webpack的相关配置都写的比较完整了,默认是看不到webpack.config.js的。而bootstrap官网上提到如果要自定义主题色或扩展之类的。有几个方式:
a.下载bootstrap源代码,修改源文件编译出css。
b.直接修改编译出来的css。
但这两种都不推荐。因为一个是入侵了原css样式设计。而编译原码的方式,改动一次需要重编一次。比较麻烦。为解决灵活性,官网推荐了一种扩展复盖的方式。
https://getbootstrap/docs/4.3/getting-started/theming/
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
现在就来试试这个自定义custom.scss的方式进行自定义主题。
把工程执行npm run eject.把webpack.config.js的相关配置给开放出来。因为后面需要增加sass-loader来加载scss.
用vscode打开文件夹。
按照官方说明,把相应的目录结构设置完了。现在执行npm start看看能不能运行先。
我的node 6.5 babel7.x 版本,开放eject后跟起来有几个错。不要紧,处理下就好了。
提示@bable/plugin-transform-react-jsx.可能是因为react的脚手架生成的是jsx的语法需要jsx的解晰器。
安装npm install -S babel-preset-es2015 babel-preset-react
装完后运行npm start.提示找不到resolve.解晰器,装下呗。
AdeMacBook-Pro-3:bootstrap_customstyle a$ npm start
> bootstrap_customstyle@0.1.0 start /Users/a/Downloads/tt/bootstrap_customstyle
> node scripts/start.js
internal/modules/cjs/loader.js:583
throw err;
^
Error: Cannot find module 'resolve'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
...
npm install -S resolve
跑起来后。把无用的一些文件删除。像App.test.js, logo.svg. serviceWorker.js,App.css
然后修改App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="container">
bootstrap hello world ! custom theming!
</div>
);
}
}
export default App;
修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
最终目录结构;
好了,现在只是可以运行。并没有使用bootstrap.下面安装下bootstrap.
5.npm install -S bootstrap
因为bootstrap依赖jquery 和popper.js所以也安装一把。
npm install -S jquery popper.js
修改App.js
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
class App extends Component {
render() {
return (
<div className="container bg-primary">
bootstrap hello world ! custom theming!
</div>
);
}
}
export default App;
这里使用直接引css的方式。只是为了看效果。
好了,现在换种引用方式。
把import 'bootstrap/dist/css/bootstrap.css';改为import 'bootstrap';却发现样式不启作用了。
接下来,我们通过官网建议使用scss的方式导入。
修改custom.scss
@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
// @import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
// @import "../node_modules/bootstrap/scss/code";
// @import "../node_modules/bootstrap/scss/grid";
接下来安装npm install -S sass-loader postcss-loader autoprefixer
参考这个:https://getbootstrap/docs/4.3/getting-started/webpack/
配置一段规则到wepack.config.js中。
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
加规则特别注意,我之前经为可以随便加的。放在最前面,结果出BUG。后面我放到最后一段。当然具体位置要阅读webpack.config.js配置中的规则,看下放在那里合适。因为规则解晰是自下而上的。
修改好配置后。把App.js的改入改为
import React, { Component } from 'react';
// import 'bootstrap/dist/css/bootstrap.css';
// import 'bootstrap';
import '../scss/custom.scss';
...
然后npm start发现提示
Failed to compile.
./src/App.js
Module not found: You attempted to import ../scss/custom.scss which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
发现不能访问src外的资源文件。原因为是脚手架帮我们做了限制。只需要找到webpack.config.js中的
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),注释起来就好了。
Failed to compile.
./scss/custom.scss (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/sass-loader/lib/loader.js!./scss/custom.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
需要安装node-sass后再运行。OK。
修改App.js中的className样式为className="container bg-primary text-danger text-center display-3"
运行效果。
好了,到此bootstrap能使用。并且可以加需自定义的scss文件了。那么自定义主题色就可以执行了。按官方所后的。在custom.scss中对变量的复写。具体有那些变量可以参看scss/_variables.scss
.
在custom.scss复写主题
$theme-colors: (
"primary": #00ff00,//#0074d9,
"danger": #f7f307
);
@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
...
然后运行。
OK,自定义主题色完成。并没有改动源代码。也没有下载bootstrap源码编译。其实大家多看看文档说明,找找,练练。捣整下,都会弄出来的。
demo:https://download.csdn/download/fengsh998/11003919
更多推荐
自定义bootstrap 的主题色
发布评论