©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
学习如何使用 Webpack 2 在您的项目中引入 Bootstrap。
安装引导作为一个使用NPM的Node.js模块。
进口引导JavaScript通常将这一行添加到应用程序的入口点%28index.js
或app.js
29%:
import 'bootstrap';
或者,你可以单独导入插件视需要:
import 'bootstrap/js/dist/util';import 'bootstrap/js/dist/dropdown';...
引导依赖于jQuery和波普尔,所以NPM会为您安装它们,如果需要的话。但它们必须由WebPack明确提供。将下列代码添加到plugins
在您的webpack配置文件中:
plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", ... }) ... ]
注意如果你选择单独导入插件,您还必须安装出口-装载机
要充分发挥Bootstrap的潜力并根据您的需要定制它,请使用源文件作为项目捆绑过程的一部分。
首先,创建自己的_custom.scss
并使用它覆盖内置自定义变量然后,使用主Sass文件导入自定义变量,然后是Bootstrap:
@import "custom";@import "~bootstrap/scss/bootstrap";
要编译Bootstrap,请确保安装和使用所需的加载器:Sass-装载机,,,后置装载机带着自动复位器.在设置最少的情况下,您的WebPack配置应该包括此规则或类似的内容:
... { 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 }] }, ...
或者,您也可以通过简单地将这一行添加到项目的入口点来使用Bootstrap的现成的css:
import 'bootstrap/dist/css/bootstrap.min.css';
在这种情况下,您可以使用现有的规则css
没有任何特殊的修改WebPack配置。