વેબપેક

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

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

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

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

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

import 'bootstrap';

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

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

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

આયાત શૈલીઓ

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

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

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

@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 postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          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']
    }
  ]
}
...