Question

我在Vue网络应用中使用bootstrap-4，但我无法按照here解释自定义此内容。

我的 index.html 使用Bootstrap CDN，如下所示：

<!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的顺序。

以下是 custom.scss ，我将覆盖变量：

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

但这不起作用。

我也尝试在我的应用组件中导入它，如下所示：

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

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

如何覆盖这些变量以自定义我的webapp。

Answer 1

通过使用npm包和webpack自定义，您可以使其更加清洁。

如果您首先在项目中安装bootstrap：

npm install bootstrap@4.0.0-alpha.5

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

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

现在转到您的webpack配置文件并添加sassLoader对象，其中包含以下内容：

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

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

现在您可以直接在.vue文件中使用bootstrap，webpack会在您添加以下内容时为您编译：

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

要自定义它我建议首先拉入引导程序_variables然后你可以引用正常的一切，即

@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版本或者它们可以覆盖内容，但您现在应该能够完全自定义引导程序。

另一个好处是，此方法允许您去除任何未使用的引导程序组件。要这样做而不是@import "bootstrap";这是整个引导程序库，而是导航到该文件，即node_modules/bootstrap/scss/bootstrap.scss，然后复制您真正想要的@ import。基本上优化您的项目...

Answer 2

我尝试了以下方法：

克隆了引导程序repo
在此目录中修改了_custom.scss。
跑npm install
按documentation

grunt dist

<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

<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 href="/static/bootstrap.js"></script>

在我的 index.html

所以我的 index.html 有以下内容：

INSERT

截至目前，我不认为在使用bootstrap的CDN链接时可以进行自定义。

使用vst webapp的bootstrap：如何自定义

2 个答案: