如何使用react webpack设置bootstrap 4 scss

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (90)

我正在使用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
  1. 使用npm安装bootstrap npm install bootstrap@4.0.0-alpha.3

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

提问于
用户回答回答于
npm install --save-dev sass-loader css-loader style-loader node-sass

在你的webpack.config.js上:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]
用户回答回答于

似乎样板文件不使用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";

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

扫码关注云+社区

领取腾讯云代金券