在vue webapp中使用引导程序:如何自定义

本文介绍了在vue webapp中使用引导程序:如何自定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Vue Web应用程序中使用 bootstrap-4 ，但是我无法自定义如此处所述.

I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.

我有我的 index.html ，它使用引导CDN ，如下所示:

I have my index.html which uses Bootstrap CDN, like following:

<!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 http-equiv="x-ua-compatible" content="ie=edge">

    <title>Sample</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="/static/custom.scss" type="text/x-scss">  ==> where I am overwriting variable
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>

    <script src="/dist/client-vendor-bundle.js"></script>
    <script src="/dist/client-bundle.js"></script> -->
  </body>
</html>

我还尝试更改 index.html 中custom.scss和bootstrap.css的顺序.

I also tried changing the order of custom.scss and bootstrap.css in index.html as well.

以下是 custom.scss ，我在其中覆盖变量:

Following is custom.scss, where I am overwriting variables:

$body-bg:    #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;

但这不起作用.

我还尝试将其导入到我的应用程序组件中，如下所示:

I also tried importing this in my app component, like following:

<style lang="scss">
  @import 'custom.scss';

  // Following also did not work
  $body-bg: #333;
  $body-color: #999;
</style>

如何覆盖这些变量以自定义我的Web应用程序.

How do I overwrite these variable to customise my webapp.

推荐答案

您可以通过使用npm软件包和webpack定制使这一点更加简洁.

You can make this a lot cleaner by using the npm package and a webpack customisation.

如果您首先在项目中安装引导程序:

If you first install bootstrap in your project:

npm install [email protected]

并确保可以在组件中使用sass-loader:

and make sure you can use sass-loader in your components:

npm install sass-loader node-sass --save-dev

现在转到您的webpack配置文件，并添加具有以下内容的sassLoader对象:

now go to your webpack config file and add a sassLoader object with the following:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot应该只指向您可以从中导航到node_packages的位置，在我的情况下，这是:path.resolve(__dirname, '../')

projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')

现在，您可以直接在.vue文件中使用引导程序，并且当您添加以下内容时，webpack会为您编译引导程序:

Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:

<style lang="scss">
  @import "bootstrap";
</style>

要对其进行自定义，我建议先拉入引导程序_variables，然后您可以引用所有与正常情况类似的内容，即

To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.

@import "_variables";

// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;

// just place all your customisation work above the below import of bootstrap
@import "bootstrap";

这意味着您需要删除任何CDN CSS版本，否则它们可能会覆盖内容，但是您现在应该能够完全自定义引导程序.

This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.

此方法的另一个好处是，您可以删除所有不使用的引导程序组件.为此，而不是整个引导程序库的@import "bootstrap";，而是导航到该文件，即node_modules/bootstrap/scss/bootstrap.scss，然后跨实际所需的@import复制.从根本上优化您的项目...

As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than @import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the @import's you actually want. Essentially optimising your project...

这篇关于在vue webapp中使用引导程序:如何自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！