Question

嘿伙计们我刚刚测试过Bootstrap 4，由于某些原因我无法启用Flexbox Grid。

这是我的基本SCSS项目结构，只是意味着这一点：

styles
├── framework
│   ├── vendor
│   │   ├── _bootstrap.scss
│   │
│   ├── _custom.scss
│
├── main.scss

我将所有我的Bootstrap SASS文件从NPM导入基本的_bootstrap.scss文件：

/*!
 * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/custom";
@import "../../../../node_modules/bootstrap/scss/variables";
@import "../../../../node_modules/bootstrap/scss/mixins";

// Reset and dependencies
@import "../../../../node_modules/bootstrap/scss/normalize";
@import "../../../../node_modules/bootstrap/scss/print";

// Core CSS
@import "../../../../node_modules/bootstrap/scss/reboot";
@import "../../../../node_modules/bootstrap/scss/type";
@import "../../../../node_modules/bootstrap/scss/images";
@import "../../../../node_modules/bootstrap/scss/code";
@import "../../../../node_modules/bootstrap/scss/grid";
@import "../../../../node_modules/bootstrap/scss/tables";
@import "../../../../node_modules/bootstrap/scss/forms";
@import "../../../../node_modules/bootstrap/scss/buttons";

// Components
@import "../../../../node_modules/bootstrap/scss/animation";
@import "../../../../node_modules/bootstrap/scss/dropdown";
@import "../../../../node_modules/bootstrap/scss/button-group";
@import "../../../../node_modules/bootstrap/scss/input-group";
@import "../../../../node_modules/bootstrap/scss/custom-forms";
@import "../../../../node_modules/bootstrap/scss/nav";
@import "../../../../node_modules/bootstrap/scss/navbar";
@import "../../../../node_modules/bootstrap/scss/card";
@import "../../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../../node_modules/bootstrap/scss/pagination";
@import "../../../../node_modules/bootstrap/scss/tags";
@import "../../../../node_modules/bootstrap/scss/jumbotron";
@import "../../../../node_modules/bootstrap/scss/alert";
@import "../../../../node_modules/bootstrap/scss/progress";
@import "../../../../node_modules/bootstrap/scss/media";
@import "../../../../node_modules/bootstrap/scss/list-group";
@import "../../../../node_modules/bootstrap/scss/responsive-embed";
@import "../../../../node_modules/bootstrap/scss/close";

// Components w/ JavaScript
@import "../../../../node_modules/bootstrap/scss/modal";
@import "../../../../node_modules/bootstrap/scss/tooltip";
@import "../../../../node_modules/bootstrap/scss/popover";
@import "../../../../node_modules/bootstrap/scss/carousel";

// Utility classes
@import "../../../../node_modules/bootstrap/scss/utilities";

我还有一个_custom.scss位于放置引导程序的供应商文件夹之外：

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

$enable-flex:               true;

正如您所见，_custom.scss文件包含$enable-flex变量并设置为true。

然后我有这个main.scss文件将所有内容联系起来：

// Bootstrap Vendor Imported From NPM
@import "framework/vendor/bootstrap";
// Custom Variables For Bootstrap
@import "framework/custom";

当我尝试使用网格时，一切仍然设置为浮点数，而我的_custom.scss文件未启用弹性网格。

如果我更改了NPM bootstrap包文件夹中的_custom.scss，则网格已启用但是我不能将其用作解决方案，就像其他人使用我的项目并运行NPM一样，这将被覆盖。

关于为什么这可能不起作用的任何建议都将非常感谢。

使用NPM在Bootstrap 4中启用Flexbox Grid

0 个答案: