WebPACKのブートストラップローダのロードカスタムファイル私は私のカスタム.scssファイルと、このような.bootstraprc私のセットアップでを追加しようとしました<a href="https://github.com/shakacode/bootstrap-loader" rel="noreferrer">bootstrap-loader</a></p> <p>このプラグインを使用して、私は、ブートストラップ-SASSをロードするためのWebPACKを使用してい

Question

をブートストラップした後：

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{}を再確認したように、ブートストラップの後に表示されています。ブートストラップの前にファイルをインポートしてください。

これはこのようなものか、間違えていますか？

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