巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > Webpack

何使用Webpack在项目中包含Bootstrap

时间:2020-04-06 14:11:21  来源:巅峰霸主  作者:烈火大地 点击:
摘要:将bootstrap应用于项目之中,需要将相关的js和css文件导入项目中,并且将bootstrap作为项目的一个部分进行整合,详细方法如下……

Webpack

了解如何使用Webpack在项目中包含Bootstrap。

安装引导程序

使用npm 将引导程序安装为Node.js模块。

导入JavaScript

通过Bootstrap的JavaScript来添加(index.js or app.js)

import 'bootstrap';

或者,您可以根据需要分别导入插件

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap取决于在属性中指定的jQueryPopper peerDependencies。这意味着您必须确保将它们都添加到您的package.json并且使用npm install --save jquery popper.js

导入样式

导入预编译的SASS

要充分发挥Bootstrap的潜力并根据需要对其进行自定义,请将源文件用作项目捆绑过程的一部分。

首先,创建自己的_custom.scss并使用它覆盖内置的自定义变量。然后,使用您的主Sass文件导入您的自定义变量,然后导入Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

为了使Bootstrap能够编译,请确保安装并使用所需的装载程序:sass-loaderpostcss-loaderAutoprefixer。通过最少的设置,您的webpack配置应包含此规则或类似规则:

...
{
  test: /.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

导入编译的css

另外,您可以通过将Bootstrap的现成CSS添加到项目的入口点来使用它:

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下,您可以将现有规则用于,css而无需对webpack配置进行任何特殊修改,除非您不需要sass-loader仅使用style-loadercss-loader即可

...
module: {
  rules: [
    {
      test: /.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...


(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部