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

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

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>

Más tutoriales de vue:

• Una descripción general de Vue.js
• La CLI de Vue.js: aprenda a usarla
• DevTools de Vue.js
• Configuración de VS Code para el desarrollo de Vue
• Crea tu primera aplicación con Vue.js
• Componentes de un solo archivo de Vue.js
• Plantillas e interpolaciones de vue.js
• Directivas de Vue.js
• Métodos de Vue.js
• Propiedades calculadas de Vue.js
• Diseñar componentes de Vue.js usando CSS
• Vigilantes de Vue.js
• Métodos Vue vs observadores vs propiedades calculadas
• Filtros de Vue.js
• Componentes de Vue.js
• Tragamonedas Vue.js
• Accesorios de componentes de Vue.js
• Eventos de Vue.js
• Comunicación de componentes de Vue.js
• Vuex, el administrador de estado de Vue.js
• Vue, usa un componente dentro de otro componente
• Vue, cómo usar un accesorio como nombre de clase.
• Cómo usar SCSS con componentes de archivo único Vue.js
• Usando Tailwind con Vue.js
• El enrutador Vue
• Mostrar dinámicamente un componente de Vue
• La hoja de trucos de Vue.js
• Almacene datos de Vue en localStorage usando Vuex
• Cómo aplicar dinámicamente una clase usando Vue
• Vue, cómo usar v-model
• Vue, por qué los datos deben ser una función
• Roadmap to become a Vue.js developer in 2020