在vue-cli模式下，单个vue组件引入外部框架的css，而不干扰其他组件的方式

有时会有在单独组件内引入外部框架的需要，而又不想干扰其他组件。

放在main里,css会影响到所有组件。

放到index.html同样会有影响。

所以要放到单组件的style scoped里

你可以 单独放在一个style里面：是有效的

<style scoped>
    
    .f6f6f6{
        height:100px;
        background: #f6f6f6;
        margin-top:-3px;
    }
    .orderQuery{
        width: 100%;
        position: fixed;
        background: white;
        top:0;
        left: 0;
        height: 0;
        padding-bottom: 4.85%;
        z-index: 1;
    }
    
</style>

<style scoped>
    @import '../../static/bootstrap-3.3.7/css/bootstrap.css';  
</style>

放到在一个里面，必须上置：是有效的

<style scoped>
    @import '../../static/bootstrap-3.3.7/css/bootstrap.css';  
    
    .f6f6f6{
        height:100px;
        background: #f6f6f6;
        margin-top:-3px;
    }
    .orderQuery{
        width: 100%;
        position: fixed;
        background: white;
        top:0;
        left: 0;
        height: 0;
        padding-bottom: 4.85%;
        z-index: 1;
    }
    
</style>

但是放在下面：是无效的

<style scoped>
    

    .f6f6f6{
        height:100px;
        background: #f6f6f6;
        margin-top:-3px;
    }
    .orderQuery{
        width: 100%;
        position: fixed;
        background: white;
        top:0;
        left: 0;
        height: 0;
        padding-bottom: 4.85%;
        z-index: 1;
    }
    
    @import '../../static/bootstrap-3.3.7/css/bootstrap.css';  
</style>

按照前两次的方式是没问题的