web-dev-qa-db-ja.com

設定方法bootstrap反応するwebpackで4 scss

reactjs ES6とwebpackを使用して新しいプロジェクトを開始しています

react-static-boilerplate starter を使用すると、ブートストラップ4をビルドプロセスにインポートする方法は？

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. インストール済みbootstrap= npmを使用

    npm install [email protected]

今、メインのbootstrap=ファイルをindex.jsに必要とする場合、それは正常にロードされます。

csstwitter-bootstrapreactjswebpack
20
Zalaboza

まず、scss用の適切なローダーをダウンロードする必要があります

Sass-loaderをインストールする

npm install sass-loader --save-dev

次に、すべてのscssファイルをテストして処理できるようにwebpackを構成する必要があります。ここでそれが行われる方法です

{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

26
Jorawar Singh

ボイラープレートは 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 に非常に近いようです

10
Daniel Dubovski

既にsass用に設定されたwebpackを使用して、react-slingshotに切り替えたので、手順がいくつか少なくなりました。生のボイラープレートから、すでに行ったようにnpmでbootstrap 4を追加します。

npm install [email protected] --save

次に、src/styles/styles.scssで、いくつかのインポートを追加します

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

これは、@ DanielDubovskiが示しているのと本質的に同じですが、bootstrap overridesの個別のファイルを持つことはもう少し慣習的であり、計画しているのでデフォルトはもう必要ありません。ブートストラップのデフォルトを上書きするため、おそらくカスタムのbootstrap=色を誤って上書きしたくないでしょう。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;
9
Ben Sidelinger
npm install --save-dev sass-loader css-loader style-loader node-sass

webpack.config.jsで：

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

OPの元のフレームワークではありません（ただし、それは数年前のことです）。 [email protected]現在、SCSSコンパイルが組み込まれています。したがって、新しいプロジェクトにそれを使用している場合、インポートするのは十分簡単です： https://facebook.github.io/create-react-app/docs/adding-bootstrap

0
martinedwards