Webpack: определение области действия SCSS под селектором приложений vue

Question

Я пишу vue-приложение, которое визуализируется внутри страницы на «традиционном» серверном сайте, в этом контейнере:

<div id="account-summary-container"></div>

Все отлично работает при локальной разработке.Но при запуске в контексте веб-сайта возникает коллизия стилей, поскольку и мое приложение, и стили веб-сайта являются глобальными.Мое приложение испортило стили на всем сайте.

Как сделать так, чтобы все стили в моем приложении были локальными для селектора, в котором отображается мое приложение?

Мое приложение использует стили начальной загрузки 4, которыеЯ загружаю с css-loader.

У меня есть точки входа webpack.config.js:

entry: {
  app: ["./src/scss/styles.scss", "./src/app.js"]
},

и styles.scss выглядит так:

@import '~bootstrap/scss/bootstrap';
@import '../css/feather.min.css';
@import '../css/icomoon-spinners.css';
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'helpers/placeholders';
...

Я думаю, css-modules может бытьответ, но я не могу понять, как заставить css-loader сделать ВСЕ стили локальными для #account-summary-container.Я попытался сделать это в styles.scss:

:local(#account-summary-container) {
  composes: "~bootstrap/scss/bootstrap";
  composes: "../css/feather.min.css";
  ...
}

И он посмеялся над моей неудачной попыткой:

Error: composition is only allowed when selector is single :local class name not in ":local(#account-summary-container)", "#account-summary-container" is weird

Я задаюсь вопросом, правильно ли я подошел к этому.Я надеюсь, что мне не придется много переписывать стили.

Answer 1

Найден ответ . Довольно просто Должен был V8 (conk).

.pony {
    @import 'sub';
    font-size: 100px;
}

Answer 2

Чтобы настроить таргетинг только на компоненты внутри вашего экземпляра Vue, вы должны использовать scoped styles. Это своего рода боль, потому что вы не можете определить область действия css в «основном» файле App.vue и позволить всем дочерним элементам наследовать ее - вы должны использовать scoped styles для каждого компонента, который в ней нуждается, что может привести к больше запросов, чем вы хотите ..

В качестве примера (я проверял это, и оно должно работать) ..

<template>
    <!--
      VUE/COMPONENT TEMPLATE
    -->
</template>

<script>
  export default {
    /* ***********************
         VUE/COMPONENT CODE
       *********************** */
  };
</script>

<!-- 
*********************************************************
***** SCOPE CSS PER COMPONENT ****************************
***** IMPORT VIA 'src="./path/to/cssfile.css"' ***********
**********************************************************
--> 
<style scoped src="../css/style.css">

</style>