Javascript 如何将文件导入到范围样式标记中而不使其溢出？

我正在使用

.vue

文件导入样式标记中的css文件。作用域css文件正在影响我页面上的所有css，我只希望它影响我当前的组件

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<style type="text/css" scoped>
    @import '~bootstrap/dist/css/bootstrap.css';
</style>

@导入“~bootstrap/dist/css/bootstrap.css”；

如何导入作用域为当前组件的css文件？

您可以使用sass吗

首先，您必须安装sass加载程序：

npm install sass-loader node-sass --save-dev   

然后你可以这样使用它：

<template>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<style lang="scss" scoped>
    .container {
       @import '~bootstrap/dist/css/bootstrap.css';
    }
</style>

.集装箱{
@导入“~bootstrap/dist/css/bootstrap.css”；
}

将范围样式插入当前组件的顶层@bigless原始css范围在2014年左右被弃用。谢谢，但这似乎不起作用。我正在使用Laravel mix来处理我的webpack.config文件，如果这给了你一些建议，你不应该真的改变你的配置中的任何东西。我无法让它工作。我认为sass加载器不支持在类中导入。我只是使用scss进行了原始构建，没有vue来查看发生了什么。它撕掉了.container{}，只有@import。很奇怪。