Skip to content

css-modules.md

Latest commit

 

History

History
26 lines (20 loc) · 720 Bytes

css-modules.md

File metadata and controls

26 lines (20 loc) · 720 Bytes

CSS Modules

If you want to use CSS modules in single file component, simply add module attribute:

<style module>
  .foo {
    color: blue;
  }
</style>

<template>
  <div id="app">
    <div :class="$style.foo">foo</div>
  </div>
</template>

CSS modules is disabled in your non-vue components by default (eg: import 'style.css' in a JS file), but when you enabled JSX components in CLI prompts it will be set to true by default. However you can always toggle it on and off by setting cssModules in ./build/config.js:

- cssModules: true
+ cssModules: false

For more documentations on the usage of CSS modules, please head to http://vue-loader.vuejs.org/en/features/css-modules.html