વેબપેક

Webpack 3 નો ઉપયોગ કરીને તમારા પ્રોજેક્ટમાં બુટસ્ટ્રેપનો સમાવેશ કેવી રીતે કરવો તે જાણો.

બુટસ્ટ્રેપ ઇન્સ્ટોલ કરી રહ્યું છે

npm નો ઉપયોગ કરીને Node.js મોડ્યુલ તરીકે બુટસ્ટ્રેપ ઇન્સ્ટોલ કરો .

JavaScript આયાત કરી રહ્યું છે

આ લાઇનને તમારી એપ્લિકેશનના એન્ટ્રી પોઈન્ટમાં ઉમેરીને બુટસ્ટ્રેપની JavaScript આયાત કરો (સામાન્ય રીતે index.jsઅથવા app.js):

import 'bootstrap';

વૈકલ્પિક રીતે, તમે જરૂરિયાત મુજબ વ્યક્તિગત રીતે પ્લગઈનો આયાત કરી શકો છો:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

બુટસ્ટ્રેપ jQuery અને Popper પર આધારિત છે , આને આ રીતે વ્યાખ્યાયિત કરવામાં આવે છે , આનો અર્થ એ છે કે તમારે તમારા ઉપયોગ peerDependenciesમાટે તે બંને ઉમેરવાની ખાતરી કરવી પડશે .package.jsonnpm install --save jquery popper.js

આયાત શૈલીઓ

પ્રીકમ્પાઇલ્ડ Sass આયાત કરી રહ્યું છે

બુટસ્ટ્રેપની સંપૂર્ણ સંભાવનાનો આનંદ માણવા અને તેને તમારી જરૂરિયાતો અનુસાર કસ્ટમાઇઝ કરવા માટે, તમારા પ્રોજેક્ટની બંડલિંગ પ્રક્રિયાના ભાગ રૂપે સ્રોત ફાઇલોનો ઉપયોગ કરો.

પ્રથમ, તમારું પોતાનું બનાવો અને બિલ્ટ-ઇન કસ્ટમ ચલોને_custom.scss ઓવરરાઇડ કરવા માટે તેનો ઉપયોગ કરો . પછી, તમારા કસ્ટમ વેરિયેબલ્સને આયાત કરવા માટે તમારી મુખ્ય સાસ ફાઇલનો ઉપયોગ કરો, ત્યારબાદ બુટસ્ટ્રેપ:

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

કમ્પાઇલ કરવા માટે બુટસ્ટ્રેપ માટે, ખાતરી કરો કે તમે જરૂરી લોડર ઇન્સ્ટોલ અને ઉપયોગ કરો છો: sass-loader , postcss-loader Autoprefixer સાથે . ન્યૂનતમ સેટઅપ સાથે, તમારા વેબપૅક રૂપરેખામાં આ નિયમ અથવા તેના સમાનનો સમાવેશ થવો જોઈએ:

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

સંકલિત CSS આયાત કરી રહ્યું છે

વૈકલ્પિક રીતે, તમે તમારા પ્રોજેક્ટના એન્ટ્રી પોઈન્ટમાં આ લીટી ઉમેરીને બુટસ્ટ્રેપના ઉપયોગ માટે તૈયાર css નો ઉપયોગ કરી શકો છો:

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

આ કિસ્સામાં તમે તમારા હાલના નિયમનો ઉપયોગ cssવેબપેક રૂપરેખામાં કોઈ ખાસ ફેરફાર કર્યા વિના કરી શકો છો, સિવાય કે તમારે sass-loaderફક્ત style-loader અને css-loader ની જરૂર નથી .

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