Cómo usar SCSS con componentes de archivo único Vue.js

Descubra cómo habilitar SCSS en sus componentes de Vue.js

Utilizando laVue CLIpuede habilitar "Preprocesadores CSS" y puede elegir cuál habilitar:

Vue CLI

Si está utilizando un proyecto que no se basa en Vue CLI, o un proyecto que se inicializó con Vue CLI pero no agregó la compatibilidad con el preprocesador CSS, puede agregarlo más adelante usando:

npm install --save-dev node-sass sass-loader

Dentro de los componentes de su aplicación, puede usar

<style lang="scss">
...
</style>

y agregue su código SCSS allí.

Si desea mantener su código SCSS en un archivo externo, puede hacerlo y simplemente importarlo en la parte del script de su componente:

<script>
import '../public/style.scss'

//… </script>

Descarga mi gratisManual de Vue


Más tutoriales de vue: