如何使用react webpack设置bootstrap 4 scss

Question

我正在使用reactjs ES6和webpack开始一个新项目

使用react-static-boilerplate启动问题是如何将bootstrap4导入构建过程？

我不想使用bootstrap.css生成的文件,而是我希望webpack为我构建它,这样我就可以更改它的@variables并应用我的主题等.

我通过克隆样板开始了项目

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install

2. 使用npm安装bootstrap

   npm install bootstrap@4.0.0-alpha.3

现在,如果我需要主引导文件到我的index.js它将加载正常.但是如何才能包含bootsrap的sass文件来开始自定义呢？

Answer 1

首先,您需要为scss下载正确的加载程序

安装sass-loader

npm install sass-loader --save-dev

然后,您需要配置您的webpack以测试所有scss文件,以便它可以处理它.这是它如何完成的

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

如果你有关于node-sass的错误

如果您遇到无法解析node-sass的错误,请安装

npm i node-sass --save-dev

现在,如果您导入bootstrap.scss,webpack将为您捆绑它

import "bootstrap/scss/bootstrap.scss"

如何定制它

您自己的scss文件中的示例

$btn-font-weight:bold;

然后导入要覆盖的组件或整个bootstrap.scss

@import '~bootstrap/scss/bootstrap.scss';

在我的情况下style.scss

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

main.js

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

希望这有助于您实现目标!

我在这里创建了一个演示应用程序

运行npm install 并npm start 得到了localhost:8080

Answer 2

似乎样板文件不使用sass-loader,也不查找.scss文件.

所以首先安装 npm i sass-loader --save

然后在webpack配置中的加载器部分下你应该添加如下内容:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

现在,如果你想使用bootstrap的.scss变量,你可以这样做:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

并在你main.js的风格导入

import "styles/app.scss";

另外,我应该提一下,这似乎非常接近这个答案

Answer 3

现在你已经开始使用已经为sass设置的webpack进行反应 - 弹跳,这样可以减少一些步骤.从原始样板文件中,使用npm添加bootstrap 4,如下所示:

npm install bootstrap@4.0.0-alpha.3 --save

然后在src/styles/styles.scss中添加几个导入

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

这与@DanielDubovski向您展示的情况基本相同,但是有一个单独的引导程序覆盖文件更常规,并且您不再需要默认值,因为您计划覆盖bootstraps默认值而您可能不会想要意外覆盖自定义引导颜色.要开始使用src/styles/bootstrap-custom.scss,您可以进入node_modules/bootstrap/scss/_variables.scss并查看默认变量的完整列表.然后,您可以复制要更新的变量名称.这是一个bootstrap-custom.scss的例子,它只是覆盖了灰度颜色:

/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;