vue-loader

Table of Contents

Features

Scoped CSS

Deep Selectors

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')
    }
  }
),