[Vuejs]-Webpack: scoping all SCSS under vue app selector

by

0👍

In order to target only components inside of your Vue instance you have to use scoped styles. It is kind of a pain because you can’t scope the css on the “main” App.vue file and let all children inherit it – you have to use scoped styles on each component that need it, which may result in more requests than you’d like..

As an example (I tested this and it should work)..

<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>

0👍

Found the answer. Pretty simple. Should had a V8 (conk).

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

Leave a comment