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>

如何将文件导入具有作用域的样式标签而又不会渗出？

1 个答案: