ವೆಬ್ಪ್ಯಾಕ್
Webpack 3 ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.
npm ಬಳಸಿಕೊಂಡು Node.js ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ .
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ಪ್ರವೇಶ ಬಿಂದುವಿಗೆ ಈ ಸಾಲನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ 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
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಆನಂದಿಸಲು ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ಬಂಡಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗವಾಗಿ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ಬಳಸಿ.
ಮೊದಲಿಗೆ, ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸಿ ಮತ್ತು ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್ಗಳನ್ನು_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 ಅನ್ನು ಬಳಸಬಹುದು:
import 'bootstrap/dist/css/bootstrap.min.css';
ಈ ಸಂದರ್ಭದಲ್ಲಿ ನೀವು ವೆಬ್ಪ್ಯಾಕ್ ಕಾನ್ಫಿಗರೇಶನ್ಗೆ ಯಾವುದೇ ವಿಶೇಷ ಮಾರ್ಪಾಡುಗಳಿಲ್ಲದೆ ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ನಿಯಮವನ್ನು ಬಳಸಬಹುದು , ನಿಮಗೆ ಕೇವಲ ಸ್ಟೈಲ್-ಲೋಡರ್ ಮತ್ತು css-css
ಲೋಡರ್ ಅಗತ್ಯವಿಲ್ಲದ ಹೊರತು .sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...