Table of Contents

• Features
  • Scoped CSS
• Configurations
  • Pre-Processors

Features

Scoped CSS

Deep Selectors

• Keep using classes for performance efficiency
• Be careful with descendant selectors in recursive components
• With scoped, the parent component's styles will not leak into child components.
• However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.

To affect child components, use >>> combinator

<template>
  <div id="parent">
  </div>
</template>

<style scoped>
#parent >>> .child { /* ... */ }
</style>

Configurations

Pre-Processors

npm install sass-loader node-sass --save-dev

<style lang="scss">
  /* write sass here */
</style>

Use sass-resources-loader to load some scss code in each component:

npm install sass-resources-loader --save-dev

vue-loader.conf.js:

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
  }
}

Or if you use vuejs-templates/webpack, modify build/utils.js:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
    }
  }
),