在vue webapp中使用引导程序:如何自定义 [英] using bootstrap with vue webapp : How to customise
问题描述
我在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.
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 bootstrap@4.0.0-alpha.5
并确保可以在组件中使用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中使用引导程序:如何自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
