bootstrap-v4-chinese-document
/
Webpack.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.101.0">

  <meta name="docsearch:language" content="en">
  <meta name="docsearch:version" content="4.6">

  <title>介绍文档 · Bootstrap v4.6</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.com/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">

  <link href="https://getbootstrap.com/docs/4.6/assets/css/docs.css" rel="stylesheet">

  <!-- Favicons -->
  <link rel="manifest" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/manifest.json">
  <link rel="icon" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/favicon.ico">
  <meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
  <meta name="theme-color" content="#563d7c">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@getbootstrap">
  <meta name="twitter:creator" content="@getbootstrap">
  <meta name="twitter:title" content="Introduction">
  <meta name="twitter:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png">

  <!-- Facebook -->
  <meta property="og:url" content="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
  <meta property="og:title" content="Introduction">
  <meta property="og:description"
    content="Get started with Bootstrap, the world&rsquo;s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <script defer src="https://cdn.usefathom.com/script.js" site="ITUSEYJG"></script>
  <script>
    window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', 'UA-146052-10', 'getbootstrap.com');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>


</head>

<body>
  <div class="skippy overflow-hidden">
    <div class="container-xl">
      <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" data-href="#content">跳转到主要内容</a>
      <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" data-href="#bd-docs-nav">跳转到文档导航</a>
    </div>
  </div>


  <div class="d-block px-3 py-2 text-center text-bold skippy">
    <a data-href="" class="text-white">Bootstrap 有更新版本！</a>
  </div>

  <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
    <a class="navbar-brand mr-0 mr-md-2" data-href="/" aria-label="Bootstrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img"
        focusable="false">
        <title>Bootstrap</title>
        <path fill="currentColor"
          d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" />
        <path fill="currentColor"
          d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" />
      </svg>
    </a>

    <div class="navbar-nav-scroll">
      <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item">
          <a class="nav-link" data-href="/"
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href=""
            onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">示例</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');"
            target="_blank" rel="noopener">图标</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');"
            target="_blank" rel="noopener">主题</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');"
            target="_blank" rel="noopener">博览会</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');"
            target="_blank" rel="noopener">博客</a>
        </li>
      </ul>
    </div>

    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item dropdown">
        <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
          <span class="sr-only">Bootstrap&nbsp;</span> v4.6 <span class="sr-only">(选择其他版本)</span>
        </button>
        <div class="dropdown-menu dropdown-menu-md-right">
          <a class="dropdown-item active" data-href="">当前 (4.6.x)</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">5.1.x</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="">v3.4.1</a>
          <a class="dropdown-item" data-href="">v2.3.2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" data-href="/">全部版本</a>
        </div>
      </li>

      <li class="nav-item">
        <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" data-data-href="https://github.com/twbs" target="_blank"
          rel="noopener" aria-label="GitHub">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"
            focusable="false">
            <title>GitHub</title>
            <path fill="currentColor" fill-rule="evenodd"
              d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://twitter.com/getbootstrap" target="_blank"
          rel="noopener" aria-label="Twitter">
          <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"
            focusable="false">
            <title>Twitter</title>
            <path fill="currentColor"
              d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://opencollective.com/bootstrap/" target="_blank"
          rel="noopener" aria-label="Open Collective">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg"
            viewBox="0 0 40 41" role="img" focusable="false">
            <title>Open Collective</title>
            <path fill-opacity=".4"
              d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" />
            <path
              d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" />
          </svg>
        </a>
      </li>
    </ul>

    <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
      data-href="https://getbootstrap.com/docs/4.6/getting-started/download/">下载</a>
  </header>


  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-md-3 col-xl-2 bd-sidebar">
        <form role="search" class="bd-search d-flex align-items-center">
          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..."
            autocomplete="off" data-docs-version="4.6">
          <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
            data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false"
            aria-label="Toggle docs navigation">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"
              focusable="false">
              <title>菜单</title>
              <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
                d="M4 7h22M4 15h22M4 23h22" />
            </svg>
          </button>
        </form>

        <div class="collapse d-md-block row" id="bd-docs-nav">
          <nav class="bd-links" aria-label="Main navigation">

            <div class="bd-toc-item active">
              <a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">
                入门
              </a>
              <ul class="nav bd-sidenav">
                <li class="active bd-sidenav-active">
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">介绍</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/下载.html">下载</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/目录.html">目录</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/浏览器和设备.html">浏览器和设备</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/JavaScript.html">JavaScript</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/主题.html">主题</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/构建工具">构建工具</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/Webpack.html">Webpack</a>
                </li>
                <li>
                  <a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/可访问性.html">可访问性</a>
                </li>
              </ul>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/layout/overview/">
                布局
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/content/reboot/">
                内容
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/components/alerts/">
                组件
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/utilities/borders/">
                实用工具
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/extend/approach/">
                扩展
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/migration/">
                迁移
              </a>
            </div>

            <div class="bd-toc-item">
              <a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/about/overview/">
                关于
              </a>
            </div>
          </nav>
        </div>

      </div>
      <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
        <nav id="TableOfContents">
          <ul>
            <li><a href="#安装-bootstrap">安装 Bootstrap</a></li>
            <li><a href="#导入import-javascript-插件">导入（import） JavaScript 插件</a></li>
            <li><a href="#导入import样式">导入（import）样式</a>
              <ul>
                <li><a href="#导入import预编译的-sass-文件">导入（import）预编译的 Sass 文件</a></li>
                <li><a href="#导入import编译后的-css-文件">导入（import）编译后的 CSS 文件</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </nav>

      <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>

      <body>
        <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">
            <a class="btn btn-sm btn-bd-light my-2 my-md-0"
              href="https://github.com/twbs/bootstrap/blob/v4.6.2/site/content/docs/getting-started/webpack.md"
              title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
            <h1 class="bd-title" id="content">Webpack</h1>
          </div>
          <p class="bd-lead">了解如何利用 Webpack 将 Bootstrap 应用到项目中。</p>


          <h2 id="安装-bootstrap"><span class="bd-content-title">安装 Bootstrap<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#安装-bootstrap" style="padding-left: 0.375em;"></a></span></h2>
          <p>利用 npm <a href="/docs/getting-started/download/#npm">安装 bootstrap</a> 并将其作为 Node.js 模块使用。</p>
          <h2 id="导入import-javascript-插件"><span class="bd-content-title">导入（import） JavaScript 插件<a
                class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="#" href="#导入import-javascript-插件"
                style="padding-left: 0.375em;"></a></span></h2>
          <p>通过将以下代码添加到你的应用程序的入口文件中（通常是 <code>index.js</code> 或 <code>app.js</code> 文件）从而导入（import） <a
              href="/docs/getting-started/javascript/">Bootstrap 的 JavaScript 插件</a>：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></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'</span><span class="p">;</span>
</span></span></code></pre>
          </div>
          <p>另外，你还可以根据需要 <strong>分别导入（import）独立的插件</strong> ：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></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/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 依赖 <a href="https://jquery.com/">jQuery</a> 和 <a href="https://popper.js.org/">Popper</a>，
            这两个依赖项在 <code>peerDependencies</code> 属性中已经明确指定。这意味着你必须确保使用 <code>npm install --save jquery popper.js</code>
            命令将这两个依赖项添加到
            你的 <code>package.json</code> 文件中。</p>
          <h2 id="导入import样式"><span class="bd-content-title">导入（import）样式<a class="anchorjs-link " aria-label="Anchor"
                data-anchorjs-icon="#" href="#导入import样式" style="padding-left: 0.375em;"></a></span></h2>
          <h3 id="导入import预编译的-sass-文件"><span class="bd-content-title">导入（import）预编译的 Sass 文件<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#导入import预编译的-sass-文件"
                style="padding-left: 0.375em;"></a></span></h3>
          <p>要充分发挥 Bootstrap 的潜能并根据需要对其进行定制，你需要将 Bootstrap 的源文件添加到你的项目的构建流程中。</p>
          <p>首先，创建你自己的 <code>_custom.scss</code> 文件，并将其用于覆盖 <a href="/docs/getting-started/theming/">Bootstrap
              内置的可修改变量</a>。然后，在你自己的 Sass 主文件中导入（import）该文件，最后导入 Bootstrap 主文件：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <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>为了编译 Bootstrap，请确保安装并使用了编译 Bootstrap 所需的加载器（loader）： <a
              href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>、<a
              href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> 和 <a
              href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>。在最少的配置情况下，你的 webpack
            配置文件应当包含类似下面的规则：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <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="导入import编译后的-css-文件"><span class="bd-content-title">导入（import）编译后的 CSS 文件<a class="anchorjs-link "
                aria-label="Anchor" data-anchorjs-icon="#" href="#导入import编译后的-css-文件"
                style="padding-left: 0.375em;"></a></span></h3>
          <p>另外，你还可以将以下代码行添加到项目的入口文件中从而直接使用 Bootstrap 的现成的 CSS 文件：</p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></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>在这种情况下，你可以直接使用现有的针对 <code>css</code> 文件的规则，从而无需对 webpack 的配置文件做任何特殊的修改。并且，你不再需要 <code>sass-loader</code>，只需
            <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> 和 <a
              href="https://github.com/webpack-contrib/css-loader">css-loader</a> 即可。
          </p>
          <div class="bd-clipboard"><button type="button" class="btn-clipboard" title=""
              data-original-title="Copy to clipboard">Copy</button></div>
          <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>
      </body>

      </html>
    </div>
  </div>

  <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="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"><\/script>')</script>

  <script src="https://getbootstrap.com/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>

  <script src="https://getbootstrap.com/docs/4.6/assets/js/docs.min.js"></script>
</body>

</html>