CSS 如何使用 react webpack 设置 bootstrap 4 scss

how to setup bootstrap 4 scss with react webpack

提问by Zalaboza

i'm starting a new project using reactjs ES6 and webpack

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

using react-static-boilerplate starterquestion is how can i import bootstrap4 into the build proccess ?

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

i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its @variables and apply my theme etc.

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

i started project by cloning boilerplate

我通过克隆样板开始项目

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

1. installed bootstrap using npm

   npm install [email protected]

2. 使用 npm 安装引导程序

   npm install [email protected]

now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?

现在，如果我需要主引导文件到我的 index.js 中，它将正常加载。但是我怎样才能包含 bootsrap 的 sass 文件来开始定制它呢？

回答by Jorawar Singh

First of all you need to download proper loader for scss

首先，您需要为 scss 下载适当的加载程序

Install sass-loader

安装 sass-loader

npm install sass-loader --save-dev

npm install sass-loader --save-dev

Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done

然后你需要配置你的 webpack 来测试所有的 scss 文件，以便它可以处理它。这是它的完成方式

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

If you got error regarding node-sass

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

If you got error like cannot resolve node-sass then install

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

npm i node-sass --save-dev

Now if you import bootstrap.scss webpack will bundle it for you

现在如果你导入 bootstrap.scss webpack 会为你打包

import "bootstrap/scss/bootstrap.scss"

How to customize it

如何自定义

Example in your own scss file

您自己的 scss 文件中的示例

$btn-font-weight:bold;

and then import the component you want to override or the whole bootstrap.scss

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

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

In my case style.scss

在我的例子中 style.scss

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

main.js

主文件

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

Hope this help you to achieve your goal!

希望这可以帮助您实现目标！

I have created a demo app here

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

run npm installand npm startgot to localhost:8080

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

回答by Daniel Dubovski

Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scssfiles.

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

So first off install npm i sass-loader --save

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

Then under the loaders part in the webpack config you should add something like this:

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

webpack.config.js

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"]
        }
    ]
    // ...
};

Now, if you want to play around with bootstrap's .scssvariables, you can do so like this:

现在，如果您想使用引导程序的.scss变量，您可以这样做：

styles/app.scss

styles/app.scss

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

and in your main.jsput in the style import

并在您main.js放入样式导入

import "styles/app.scss";

Also, I should mention, this seems very close to this answer

另外，我应该提到，这似乎非常接近这个答案

回答by Ben Sidelinger

Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:

既然你已经切换到 react-slingshot，并且 webpack 已经为 sass 设置好了，那么步骤就少了一些。从原始样板中，像之前一样添加带有 npm 的 bootstrap 4：

npm install [email protected] --save

Then in src/styles/styles.scss you want to add a couple imports

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

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

This is essentially the same thing as @DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:

这与@DanielDubovski 向您展示的内容基本相同，但是拥有一个单独的引导程序覆盖文件更为传统，并且您不再需要默认值，因为您计划覆盖引导程序默认值而您可能不需要想要不小心覆盖您的自定义引导程序颜色。要开始使用 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;

回答by Jan Franz Palngipang

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

on your webpack.config.js:

在你的 webpack.config.js 上：

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

回答by martinedwards

Not the OP's original framework (but that was a few years back). As of [email protected]it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap

不是 OP 的原始框架（但那是几年前的）。截至目前，[email protected]它已经内置了 SCSS 编译。因此，如果您将其用于任何新项目，那么导入很简单：https: //facebook.github.io/create-react-app/docs/adding-bootstrap