Как импортировать файлы в тег стиля с заданной областью, не выпуская его?

Question

Я импортирую файл CSS в тег стиля, используя файл .vue.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-загрузчик:

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>