When working with Vue‚ the ideal development setup is to use vue-loader to load .vue files. If you’ve never heard of .vue files‚ they basically take the idea of self contained components to the next level by allowing you to contain the template‚ css and component logic within a single file‚ and have it compile and render on your page at runtime. Nice right?
However‚ the way the style loader works is that it inserts the css into the DOM in a style tag‚ which could potentially pollute the styling of other elements on the page if your selectors are very generic. To get around this‚ you can append the “scoped” attribute to the style tag. What this does is add a unique identifier to every element in your template‚ and add this same rule to your styling rules so that that rule will only ever be applicable within the component that defined it. Great! No more leaky styles!
However‚ it’s quite common (for me at least) to be using sub components within my single component‚ for instance might pull in a component wrapper that has the HTML markup of a modal. So what if we want to tweak the styles in this instance of the wrapper component? As this component isn’t in the compilation scope our unique identifier won’t be applied to these elements.
Luckily there is a solution to this. It’s actually possible to use as many
