没有应用Sass文件样式?

时间:2017-06-19 09:08:03

标签: css sass gulp pug

所以我将我的导入文件收集在另一个文件中,收集网站不同部分的样式。现在所有部分的样式都运行得很好,除了sidebar.sass由于某种原因,我在该文件中应用的样式都没有显示出来。我尝试重新制作文件并重新导入,但它似乎无法正常工作。请查看下面的文件,看看我在做什么。

导入文件:

@import header.sass
@import header-image.sass
@import homepage-content.sass
@import sidebar.sass
@import footer.sass

sidebar.sass

.siderbar
    @extend .col-xs-12
    .search-location
        @extend .col-xs-12
        color: #96c11f
        .white
            color: white
        .search-bar
            font-size: 12px
            color: #ef7d00
            .input-group
                @extend .col-xs-12
            #custom-search-input
            padding: 3px
            border: solid 1px #E4E4E4
            border-radius: 6px
            background-color: #fff
            #custom-search-input input
                border: 0
                box-shadow: none
            #custom-search-input button
                margin: 2px 0 0 0
                background: none
                box-shadow: none
                border: 0
                color: #666666
                padding: 0 8px 0 10px
                border-left: solid 1px #ccc
            #custom-search-input button:hover
                border: 0
                box-shadow: none
                border-left: solid 1px #ccc
    .new-location
        @extend .col-xs-12
        background-color: #ef7d00
        h1
            color: white
        img
            width: 100%

sidebar.jade

.sidebar
    .search-location
        p Big bread kitchen
        p.white Bij jou in de buurt
        p.search-text zoek op uw postcode
        .search-bar
            #custom-search-input
                .input-group
                    input.form-control.input-lg(type="text", placeholder="Zoek...")
                    span.input-group-btn
                        button.btn.btn-info.btn-lg(type="button")
                            p go
    .new-location
        h1 Nieuwe vesting
        img(src="images/naarden.jpg")
    .order-online
        p.white De lekkerste broodjes en snacks
        h3 Online
            span bestellen
    .save
        h3 Sparen

地图结构:http://prntscr.com/flhmco 这是一个简单的错字,我的不好。

1 个答案:

答案 0 :(得分:1)

好像你在sidebar.sass文件中定义了一个不正确的类。在sidebar.jade中,第一个类是.sidebar,但是在sidebar.sass中它是.siderbar

sidebar.sass:

.sidebar
   @extend .col-xs-12
   ...

sidebar.jade:

.sidebar
    .search-location
        ...
相关问题