Skip to content

Latest commit

 

History

History
109 lines (82 loc) · 3.72 KB

css.md

File metadata and controls

109 lines (82 loc) · 3.72 KB

Working with CSS

Vue CLI projects comes with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus.

Pre-Processors

You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just need to manually install the corresponding webpack loaders:

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

Then you can import the corresponding file types, or use them in *.vue files with:

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

PostCSS

Vue CLI uses PostCSS internally.

You can configure PostCSS via .postcssrc or any config source supported by postcss-load-config, and configure postcss-loader via css.loaderOptions.postcss in vue.config.js.

The autoprefixer plugin is enabled by default. To configure the browser targets, use the browserslist field in package.json.

::: tip Note on Vendor-prefixed CSS Rules In the production build, Vue CLI optimizes your CSS and will drop unnecessary vendor-prefixed CSS rules based on your browser targets. With autoprefixer enabled by default, you should always use only non-prefixed CSS rules. :::

CSS Modules

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

To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with .module.(css|less|sass|scss|styl):

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

If you want to drop the .module in the filenames, set css.modules to true in vue.config.js:

// vue.config.js
module.exports = {
  css: {
    modules: true
  }
}

If you wish to customize the generated CSS modules class names, you can do so via css.loaderOptions.css in vue.config.js. All css-loader options are supported here, for example localIdentName and camelCase:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

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
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

Loaders can be configured via loaderOptions include:

::: tip This is preferred over manually tapping into specific loaders using chainWebpack, because these options need to be applied in multiple locations where the corresponding loader is used. :::