ਵੈਬਪੈਕ ਅਤੇ ਬੰਡਲ
ਵੈਬਪੈਕ ਜਾਂ ਹੋਰ ਬੰਡਲਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਸਿੱਖੋ।
ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰਨਾ
npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਨੂੰ Node.js ਮੋਡੀਊਲ ਵਜੋਂ ਸਥਾਪਿਤ ਕਰੋ।
JavaScript ਆਯਾਤ ਕਰ ਰਿਹਾ ਹੈ
ਇਸ ਲਾਈਨ ਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਐਂਟਰੀ ਪੁਆਇੰਟ (ਆਮ ਤੌਰ 'ਤੇ index.js
ਜਾਂ app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਜੇਕਰ ਤੁਹਾਨੂੰ ਸਾਡੇ ਕੁਝ ਪਲੱਗਇਨਾਂ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪਲੱਗਇਨ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
ਬੂਟਸਟਰੈਪ ਪੌਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ , ਜੋ ਕਿ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਦਰਸਾਏ ਗਏ peerDependencies
ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੀ package.json
ਵਰਤੋਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ npm install @popperjs/core
।
ਸਟਾਈਲ ਆਯਾਤ ਕਰਨਾ
ਪ੍ਰੀਕੰਪਾਈਲਡ Sass ਨੂੰ ਆਯਾਤ ਕਰਨਾ
ਬੂਟਸਟਰੈਪ ਦੀ ਪੂਰੀ ਸੰਭਾਵਨਾ ਦਾ ਆਨੰਦ ਲੈਣ ਅਤੇ ਇਸਨੂੰ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਅਨੁਸਾਰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਬੰਡਲਿੰਗ ਪ੍ਰਕਿਰਿਆ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਸਰੋਤ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪਹਿਲਾਂ, ਆਪਣਾ ਬਣਾਓ ਅਤੇ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ_custom.scss
ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ । ਫਿਰ, ਆਪਣੇ ਕਸਟਮ ਵੇਰੀਏਬਲ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਆਪਣੀ ਮੁੱਖ Sass ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਬੂਟਸਟਰੈਪ ਤੋਂ ਬਾਅਦ:
@import "custom";
@import "~bootstrap/scss/bootstrap";
ਬੂਟਸਟਰੈਪ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਲੋੜੀਂਦੇ ਲੋਡਰਾਂ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਵਰਤਦੇ ਹੋ: sass- loader , postcss-loader Autoprefixer ਨਾਲ । ਘੱਟੋ-ਘੱਟ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਹਾਡੇ ਵੈਬਪੈਕ ਸੰਰਚਨਾ ਵਿੱਚ ਇਹ ਨਿਯਮ ਜਾਂ ਸਮਾਨ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
ਕੰਪਾਇਲਡ CSS ਆ��ਾਤ ਕਰਨਾ
ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਐਂਟਰੀ ਪੁਆਇੰਟ ਵਿੱਚ ਇਸ ਲਾਈਨ ਨੂੰ ਜੋੜ ਕੇ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਲਈ ਤਿਆਰ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:
import 'bootstrap/dist/css/bootstrap.min.css';
ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਤੁਸੀਂ ਵੈੱਬਪੈਕ ਸੰਰਚਨਾ ਵਿੱਚ ਬਿਨਾਂ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਸੋਧਾਂ ਦੇ ਆਪਣੇ ਮੌਜੂਦਾ ਨਿਯਮ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ , ਸਿਵਾਏ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਸ਼ੈਲੀ-ਲੋਡਰ ਅਤੇ css-css
ਲੋਡਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ।sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...