Webpack

Importing Precompiled Sass

Bootstrapの可能性を最大限に引き出し、ニーズに合わせてカスタマイズするには、プロジェクトのバンドル・プロセスの一部としてソースファイルを使用します。

まず、あなた独自の_custom.scssを作成します。そして、それを、組み込みのカスタム変数を上書きするために、使用します。続いて、あなたのカスタム変数をインポートするために、Bootstrapで、以下のように、あなたのメインsassファイルを使用します。：

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

Bootstrapをコンパイルするのために、あなたは、確実に、必要なローダーをインストールして、使用して下さい。：sass-loader、Autoprefixerと一緒にpostcss-loader。最小限の設定で、webpackの設定には、このルールなどを含める必要があります。：

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
				　　　// ページにCSSを注入する
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
				　// CSSをCommonJSモジュールに変換する
    }, {
      loader: 'postcss-loader', // Run post css actions
				　　　　 // css動作の後に実行する
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
				   // 投稿cssプラグインは、postcss.config.jsにエクスポートすることができます
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
				 // SassをCSSにコンパイルします
    }]
  },
  ...

Importing Compiled CSS

他の方法として、あなたは、Bootstrapのすぐに使えるcssを使うかもしれません。あなたのプロジェクトのエントリ・ポイントに、単純に、この行を追加することによって、：

import 'bootstrap/dist/css/bootstrap.min.css';

この場合、あなたは、あなたが、必要としない、style-loaderとcss-loaderだけでなく、Sass-Loader以外、webpack設定に、特別な修正なしで、cssのための既存の規則を使用するかもしれません。

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...