வெப்பேக்

Webpack 3 ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு சேர்ப்பது என்பதை அறிக.

பூட்ஸ்டார்ப்பை நிறுவுகிறது

npm ஐப் பயன்படுத்தி Bootstrap ஐ Node.js தொகுதியாக நிறுவவும்.

JavaScript ஐ இறக்குமதி செய்கிறது

உங்கள் பயன்பாட்டின் நுழைவுப் புள்ளியில் (பொதுவாக அல்லது ) இந்த வரியைச் சேர்ப்பதன் மூலம் பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்டை இறக்குமதி செய்யவும்:index.jsapp.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 மேலெழுத அதைப் பயன்படுத்தவும் . பின்னர், உங்கள் தனிப்பயன் மாறிகளை இறக்குமதி செய்ய உங்கள் முக்கிய Sass கோப்பைப் பயன்படுத்தவும், அதைத் தொடர்ந்து பூட்ஸ்டார்ப்:

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

பூட்ஸ்டார்ப் தொகுக்க, தேவையான ஏற்றிகளை நிறுவி பயன்படுத்துவதை உறுதி செய்து கொள்ளவும்: sass-loader , postcss-loader with 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

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