ವೆಬ್‌ಪ್ಯಾಕ್

Webpack 3 ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲಾಗುತ್ತಿದೆ

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.jsonnpm install --save jquery popper.js

ಆಮದು ಶೈಲಿಗಳು

ಪ್ರಿಕಂಪೈಲ್ಡ್ ಸಾಸ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಆನಂದಿಸಲು ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಬಂಡಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗವಾಗಿ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿ.

ಮೊದಲಿಗೆ, ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸಿ ಮತ್ತು ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು_custom.scss ಅತಿಕ್ರಮಿಸಲು ಅದನ್ನು ಬಳಸಿ . ನಂತರ, ನಿಮ್ಮ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಮುಖ್ಯ ಸಾಸ್ ಫೈಲ್ ಅನ್ನು ಬಳಸಿ, ನಂತರ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್:

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

ಕಂಪೈಲ್ ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗಾಗಿ, ನೀವು ಅಗತ್ಯವಿರುವ ಲೋಡರ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಬಳಸುತ್ತೀರೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ: ಸಾಸ್ -ಲೋಡರ್ , ಆಟೋಪ್ರಿಫಿಕ್ಸರ್‌ನೊಂದಿಗೆ ಪೋಸ್ಟ್‌ಸಿಎಸ್‌ಎಸ್- ಲೋಡರ್ . ಕನಿಷ್ಠ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ನಿಮ್ಮ ವೆಬ್‌ಪ್ಯಾಕ್ ಸಂರಚನೆಯು ಈ ನಿಯಮವನ್ನು ಒಳಗೊಂಡಿರಬೇಕು ಅಥವಾ ಅಂತಹುದೇ:

  ...
  {
    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-css ಲೋಡರ್ ಅಗತ್ಯವಿಲ್ಲದ ಹೊರತು .sass-loader

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