javascript - Webpack bootstrap-loader 在引导后加载自定义文件

Question

我正在使用 webpack 使用此插件加载 bootstrap-sass bootstrap-loader

我尝试添加我的自定义 .scss 文件并在 .bootstraprc 中设置如下:

bootstrapVersion: 3
styleLoaders:
 - style
 - css
 - sass

appStyles: ./src/sass/main.scss

styles:

# Mixins
mixins: true

# Reset and dependencies
normalize: true
print: true
glyphicons: true

# Core CSS
scaffolding: true
type: true
code: true
grid: true
tables: true
forms: true
buttons: true

# Components
component-animations: true
dropdowns: true
button-groups: true
input-groups: true
navs: true
navbar: true
breadcrumbs: true
pagination: true
pager: true
labels: true
badges: true
jumbotron: true
thumbnails: true
alerts: true
progress-bars: true
media: true
list-group: true
panels: true
wells: true
responsive-embed: true
close: true

# Components w/ JavaScript
modals: true
tooltip: true
popovers: true
carousel: true

# Utility classes
utilities: true
responsive-utilities: true

### Bootstrap scripts
 scripts:
  transition: true
  alert: true
  button: true
  carousel: true
  collapse: true
  dropdown: true
  modal: true
  tooltip: true
  popover: true
  scrollspy: true
  tab: true
  affix: true

问题是当我构建文件时，我的自定义 css 在引导文件之前加载。

我的 main.scss:

@import '~animate.css/animate.min.css';

$color: blue;

body{
   color:$color;
}

我重新检查 body{} 是在 Bootstrap 之后出现的。但在 Bootstrap 之前导入文件。

应该是这样还是我弄错了？

Answer 1

.bootstraprc 中有一个选项可以向 Bootstrap 添加额外的样式。

# Import your custom styles here. You have access to all the bootstrap variables. If you require
# your sass files separately, you will not have access to the bootstrap variables, mixins, clases, etc.
# Usually this endpoint-file contains list of @imports of your application styles.
appStyles: ./app/styles/app.scss