Question

我正在使用reactjs ES6和webpack

开始一个新项目

使用react-static-boilerplate starter问题是如何将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

使用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"

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

我创建了一个演示应用here

运行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";

另外，我应该提一下，这似乎非常接近this answer

Answer 3

现在你已经开始使用已经设置好的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;

Answer 4

npm install --save-dev sass-loader css-loader style-loader node-sass

你的webpack.config.js上的

：

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

Answer 5

不是OP的原始框架（但是几年前）。自react-scripts@2.0.0起，它现已内置了SCSS编译功能。因此，如果将其用于任何新项目，则导入非常简单：https://facebook.github.io/create-react-app/docs/adding-bootstrap

如何使用react webpack

5 个答案: