将引导程序与 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.
我有我的 index.html，它使用 Bootstrap 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 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 文件中使用 bootstrap，当你添加以下内容时，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屋！
