Vuepress: Import CSS or Sass/Scss Styles

Enable Sass/Scss

yarn add -D sass-loader node-sass

Include Styles via Markdown

Edit any *.md file (e.g. docs/README.md)

<style lang="scss">$font-stack: Helvetica, sans-serif;$primary-color: #333;body {  font: 100% $font-stack;  color: $primary-color;}</style>

NOTE: This style is globally accessible (can be referred to by another markdown/component file), unless scoped is used.

Include Styles via Component

If you have created a VuePress component, you can include <style lang="scss"> ... </style> in the component file (exactly like Vue.js Single File Components).

NOTE: This style is globally accessible (can be referred to by another markdown/component file), unless scoped is used.

Include via file

Create docs/.vuepress/styles, as per VuePress - Directory Structure.

Edit docs/.vuepress/styles/index.styl.

font-stack = Helvetica, sans-serif
primary-color = #333

.body
  font: 100% font-stack
  color: primary-color

NOTE: Refer to Stylus (support standard CSS syntax as well).

Sadly, if you try to create index.scss, it is not pickup automatically (as of v1.0.0-alpha.48).

To enable docs/.vuepress/styles/index.styl, edit docs/.vuepress/enhanceApp.js.

import './styles/index.scss';export default ({  Vue, // the version of Vue being used in the VuePress app  options, // the options for the root Vue instance  router, // the router instance for the app  siteData // site metadata}) => {}

NOTE: You can use this method to import Sass/Scss/CSS/etc.