将 bootstrap 与 vue webapp 一起使用:如何自定义
using bootstrap with vue webapp : How to customise
我正在使用 bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained 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。
我尝试了以下有效的方法:
- 克隆了 bootstrap repo
- 在此目录中修改 _custom.scss。
- 运行
npm install
- 运行
grunt dist
和 documentation 一样
- 从这里复制生成的 bootstrap css 和 js 文件到我的 index.html
所以我的 index.html 有以下内容:
<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>
截至目前,我认为使用 bootstrap 的 CDN link 时无法进行自定义。
您可以使用 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>
要对其进行自定义,我建议先引入 bootstrap _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 版本,否则它们可能会覆盖内容,但您现在应该能够完全自定义 bootstrap。
此方法的另一个好处是,您可以删除未使用的任何 bootstrap 组件。这样做而不是 @import "bootstrap";
这是整个 bootstrap 库,而是导航到该文件,即 node_modules/bootstrap/scss/bootstrap.scss
然后复制你真正想要的 @import。从根本上优化您的项目...
我正在使用 bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained 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。
我尝试了以下有效的方法:
- 克隆了 bootstrap repo
- 在此目录中修改 _custom.scss。
- 运行
npm install
- 运行
grunt dist
和 documentation 一样
- 从这里复制生成的 bootstrap css 和 js 文件到我的 index.html
所以我的 index.html 有以下内容:
<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>
截至目前,我认为使用 bootstrap 的 CDN link 时无法进行自定义。
您可以使用 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>
要对其进行自定义,我建议先引入 bootstrap _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 版本,否则它们可能会覆盖内容,但您现在应该能够完全自定义 bootstrap。
此方法的另一个好处是,您可以删除未使用的任何 bootstrap 组件。这样做而不是 @import "bootstrap";
这是整个 bootstrap 库,而是导航到该文件,即 node_modules/bootstrap/scss/bootstrap.scss
然后复制你真正想要的 @import。从根本上优化您的项目...