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中有一个选项可以为引导程序添加额外的样式。

# 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

Webpack bootstrap-loader在引导程序之后加载自定义文件

1 个答案: