diff options
Diffstat (limited to 'docs/4.6/getting-started/webpack/index.html')
| -rw-r--r-- | docs/4.6/getting-started/webpack/index.html | 106 |
1 files changed, 53 insertions, 53 deletions
diff --git a/docs/4.6/getting-started/webpack/index.html b/docs/4.6/getting-started/webpack/index.html index 5cf4375804..56e0112cb8 100644 --- a/docs/4.6/getting-started/webpack/index.html +++ b/docs/4.6/getting-started/webpack/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Learn how to include Bootstrap in your project using Webpack."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -<meta name="generator" content="Hugo 0.88.1"> +<meta name="generator" content="Hugo 0.101.0"> <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="4.6"> @@ -17,7 +17,7 @@ <!-- Bootstrap core CSS --> -<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- Documentation extras --> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> @@ -105,10 +105,10 @@ <ul class="navbar-nav ml-md-auto"> <li class="nav-item dropdown"> - <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false"> - v4.6 - </a> - <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span> + </button> + <div class="dropdown-menu dropdown-menu-md-right"> <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a> @@ -240,7 +240,7 @@ </div> - + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> <nav id="TableOfContents"> <ul> @@ -255,7 +255,7 @@ </ul> </nav> </nav> - + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> @@ -269,57 +269,57 @@ <p><a href="/docs/4.6/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p> <h2 id="importing-javascript">Importing JavaScript</h2> <p>Import <a href="/docs/4.6/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code>index.js</code> or <code>app.js</code>):</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span> -</code></pre></div><p>Alternatively, you may <strong>import plugins individually</strong> as needed:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/util'</span><span class="p">;</span> -<span class="kr">import</span> <span class="s1">'bootstrap/js/dist/alert'</span><span class="p">;</span> -<span class="p">...</span> -</code></pre></div><p>Bootstrap depends on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>, +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span> +</span></span></code></pre></div><p>Alternatively, you may <strong>import plugins individually</strong> as needed:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/util'</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/alert'</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">...</span> +</span></span></code></pre></div><p>Bootstrap depends on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>, which are specified in the <code>peerDependencies</code> property; this means that you will have to make sure to add both of them to your <code>package.json</code> using <code>npm install --save jquery popper.js</code>.</p> <h2 id="importing-styles">Importing Styles</h2> <h3 id="importing-precompiled-sass">Importing Precompiled Sass</h3> <p>To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p> <p>First, create your own <code>_custom.scss</code> and use it to override the <a href="/docs/4.6/getting-started/theming/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span> -<span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span> -</code></pre></div><p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="p">...</span> -<span class="p">{</span> - <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(scss)$/</span><span class="p">,</span> - <span class="nx">use</span><span class="o">:</span> <span class="p">[{</span> - <span class="nx">loader</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span> <span class="c1">// inject CSS to page -</span><span class="c1"></span> <span class="p">},</span> <span class="p">{</span> - <span class="nx">loader</span><span class="o">:</span> <span class="s1">'css-loader'</span><span class="p">,</span> <span class="c1">// translates CSS into CommonJS modules -</span><span class="c1"></span> <span class="p">},</span> <span class="p">{</span> - <span class="nx">loader</span><span class="o">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span> <span class="c1">// Run postcss actions -</span><span class="c1"></span> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">plugins</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// postcss plugins, can be exported to postcss.config.js -</span><span class="c1"></span> <span class="k">return</span> <span class="p">[</span> - <span class="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</span><span class="p">)</span> - <span class="p">];</span> - <span class="p">}</span> - <span class="p">}</span> - <span class="p">},</span> <span class="p">{</span> - <span class="nx">loader</span><span class="o">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles Sass to CSS -</span><span class="c1"></span> <span class="p">}]</span> -<span class="p">},</span> -<span class="p">...</span> -</code></pre></div><h3 id="importing-compiled-css">Importing Compiled CSS</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span> +</span></span></code></pre></div><p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">...</span> +</span></span><span class="line"><span class="cl"><span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(scss)$/</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span> <span class="c1">// inject CSS to page +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'css-loader'</span><span class="p">,</span> <span class="c1">// translates CSS into CommonJS modules +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span> <span class="c1">// Run postcss actions +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// postcss plugins, can be exported to postcss.config.js +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">[</span> +</span></span><span class="line"><span class="cl"> <span class="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">];</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles Sass to CSS +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}]</span> +</span></span><span class="line"><span class="cl"><span class="p">},</span> +</span></span><span class="line"><span class="cl"><span class="p">...</span> +</span></span></code></pre></div><h3 id="importing-compiled-css">Importing Compiled CSS</h3> <p>Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span> -</code></pre></div><p>In this case you may use your existing rule for <code>css</code> without any special modifications to webpack config, except you don’t need <code>sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="p">...</span> -<span class="nx">module</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">rules</span><span class="o">:</span> <span class="p">[</span> - <span class="p">{</span> - <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span> - <span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s1">'style-loader'</span><span class="p">,</span> <span class="s1">'css-loader'</span><span class="p">]</span> - <span class="p">}</span> - <span class="p">]</span> -<span class="p">}</span> -<span class="p">...</span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span> +</span></span></code></pre></div><p>In this case you may use your existing rule for <code>css</code> without any special modifications to webpack config, except you don’t need <code>sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">...</span> +</span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="o">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">[</span> +</span></span><span class="line"><span class="cl"> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s1">'style-loader'</span><span class="p">,</span> <span class="s1">'css-loader'</span><span class="p">]</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"> <span class="p">]</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">...</span> +</span></span></code></pre></div> </main> </div> </div> @@ -327,7 +327,7 @@ to your <code>package.json</code> using <code>npm install --save jquery popper.j <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> -<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |