如何使用 react webpack 设置 bootstrap 4 scss

Posted 2023-02-22

【中文标题】如何使用 react webpack 设置 bootstrap 4 scss

【英文标题】：how to setup bootstrap 4 scss with react webpack

【发布时间】：2017-01-04 20:01:31

【问题描述】：

我正在使用 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 安装引导程序

npm install bootstrap@4.0.0-alpha.3

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

【问题讨论】：

澄清一下，您是在问如何在 React 组件中要求引导 SASS 文件而不是 CSS 文件？

@MichaelParker 是以及如何覆盖默认引导变量

您克隆的那个 repo 正在使用 post css，并且似乎没有为 webpack 设置 sass-loader。如果您想使用 sass，可能值得尝试为 sass 而不是 postcss 设置的另一个样板。否则，您需要将 sass 加载程序添加到此 repo。一旦你有一个 sass 构建工作，你希望有你自己的自定义变量文件，在引导之前导入，它将覆盖引导默认变量。一旦你确认了你想要去的 sass 与 postcss 的方向，如果你打算坚持使用这个样板，我会发布一个完整的答案。

@BenSidelinger 谢谢，是的，我现在正在使用 sass 和 github.com/coryhouse/react-slingshot，我现在如何导入引导 sass 文件，再次感谢。

你看到我的回答了吗@Zalaboza？一切准备就绪，可以与 react-slingshot 一起使用，我在本地设置它并且运行良好。剩下的答案肯定没有看到你的评论，因为他们仍然专注于 webpack 的 sass-loader，已经在 react-slingshot 中设置好了。

【参考方案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

【讨论】：

我不知道你为什么要在 main.js 和 style.scss 文件中导入 style.scss。我认为在style.scss 上导入会起作用。

在使用加载器时不再允许省略'-loader'后缀。现在这是正确的： test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]

如果你想只包括像网格这样的框架的一部分……这可能吗？

【参考方案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"]
        
    ]
    // ...
;

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

styles/app.scss

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

并在您的main.js 中输入样式导入

import "styles/app.scss";

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

【参考方案3】：

现在您已经切换到 react-slingshot 并且已经为 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 向您展示的内容基本相同，但是拥有一个单独的引导覆盖文件更为传统，并且您不再需要默认值，因为您计划覆盖引导程序默认值并且您可能不想意外覆盖您的自定义引导颜色。要开始使用 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;

【参考方案4】：

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

在你的 webpack.config.js 上：

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

【参考方案5】：

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