vue-cli/docs/css.md

CSS

• PostCSS
• CSS Modules
• Pre-Processors
• Passing Options to Pre-Processor Loaders

PostCSS

Vue CLI uses PostCSS internally, and enables autoprefixer by default. You can configure PostCSS via .postcssrc or any config source supported by postcss-load-config.

CSS Modules

You can use CSS Modules in *.vue files out of the box with <style module>.

If you wish to import style files as CSS Modules in JavaScript, you can import a file with a ?module resourceQuery:

import styles from './foo.css?module'
// works for all supported pre-processors as well
import sassStyles from './foo.scss?module'

If you wish to customize the CSS modules class name output you can set the css.localIdentName option in vue.config.js.

Pre-Processors

You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, you can also just manually install the corresponding webpack loaders. The loaders are pre-configured and will automatically be picked up. For example, to add Sass to an existing project, simply run:

npm install -D sass-loader node-sass

Then you can import .scss files, or use it in *.vue files with:

<style lang="scss">
$color = red;
</style>

Passing Options to Pre-Processor Loaders

Sometimes you may want to pass options to the pre-processor's webpack loader. You can do that using the css.loaderOptions option in vue.config.js. For example, to pass some shared global variables to all your Sass styles:

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/variables.scss', 'utf-8')
      }
    }
  }
}