Vuepress: How to use SCSS styles in my documentation

[sharanraj124]

This my repo. I tried to load scss file in my docs but not loaded in scss classes how to solve this problem. I already seen all issues but not get idea. help for this.

[HerrBertling]

If you mean this part: https://github.com/sharanraj124/sample-docs/blob/master/sample-docs/.vuepress/config.js#L20 – browsers do not understand .scss files. You'd need to compile it to CSS first.

I didn't setup your project, so this is guessing from here on. Let's say you'll want to use said SCSS in the demo-1.vue file (=> https://github.com/sharanraj124/sample-docs/blob/master/sample-docs/.vuepress/components/demo-1.vue ). You could do this like so:

<template>
  <p class="demo">
    {{ msg }}
  </p>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello this is <demo-1>'
    }
  }
}
</script>
<style lang="scss">
@import "../path/to/scss/file.scss"
</style>

That should be it – your SCSS should be correctly loaded within the page. Also, you can then get rid of the import in your config.js file.

[ulivz]

https://vuepress.vuejs.org/guide/using-vue.html#using-pre-processors