Vuepress: Import CSS or Sass/Scss Styles

May 31, 2019

Enable Sass/Scss

Refer Using Pre-processors.

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.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.