自定义bootstrap 的主题色

基于Bootstrap 4.3.1版本：https://getbootstrap.com/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.com/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.com/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.net/download/fengsh998/11003919