javascript - 如何将文件导入范围样式标签而不会流血？

Question

我正在使用 .vue 文件在样式标签中导入一个 css 文件。范围内的 css 文件影响我页面上的所有 css，我只希望它影响我当前的组件。

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

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

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

Answer 1

你会用sass吗？

首先你必须安装 sass-loader:

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>