SASS y BULMA

En cli-vue podemos instalar pre-procesadores.

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

y el archivo del componente verificamos q esta activo con:

<style lang="scss">
h1 {
	color: red;
}
</style>

En el caso de Vue 3, al usar el comando vue create, Vue te da a elegir si quieres usar SASS en las configuraciones manuales, en ese caso únicamente hay que decirle seleccionarlo y solo se configura Vue para usar SASS, de hecho, como Vue 3 ya no tiene el archivo webpack.config.js SASS se configura internamente

Realmente no sé qué configuración tendrías que hacer para agregar SASS a un proyecto que no lo estaba usando, pero por lo que imagino, tendías que instalar los loaders a través de NPM y usarlos en un archivo llamado vue.config,js

Para los que no tienen el webpack.config.js y quieren importar archivos .scss en los componentes

Instalar dependencias para que funcione sass:

npm i -D sass-loader node-sass

Luego en el App.vue importar el .scss

<script>
import './scss/main.scss'
//...
}

También pueden usar los estilos en el .vue:

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

Por si alguien desea usar Materialize:
npm i -S materialize-css@next

Para importarlo dentro de main.scss
@import ‘…/…/node_modules/materialize-css/sass/materialize.scss’;

Pdt: Odio Bulma, sorry es algo personal C:

importar bulma en el archivo main.scss

@import '~bulma';

importar el archivo main.scss en el componente principal

<style lang="scss">
@import '@/assets/scss/main.scss';
</style>

En mi webpack.config no está pre-configurado el SASS, que hago?

Gracias 😉

Y en vez de Bulma prefiero Flexbox Grid por las mismas razones que Nacho pero creo que es más sencillo de usar ya que usa la misma nomenclatura del grid de Bootstrap

¿Cómo configurar Sass en un proyecto vue?

En la terminal del proyecto tenemos que correr el siguiente comando:

 npm i sass-loader

Y para instalar sass-loader en el proyecto escribimos la siguiente línea:

npm install sass-loader sass webpack --save-dev

Listo, ya podemos utilizar sass!

Más plugins =(

me aparece este error desde hace varias clases y no he podido solucionarlo

Failed to compile.
./src/App.vue
/home/mrromo/Documentos/Code/JavaScript/NodeJS/Curso de Vue/helloworld/platzi-music/src/App.vue
  2:10  error  Parsing error: Unexpected token =
✖ 1 problem (1 error, 0 warnings)
y voy a la linea y es esto

<div id=“app”>

Yo prefiero Less

El reino de los pokemón era Maestrosdelweb, ahora el reino de dragon ball z es platzi. (BULMA) JAJAJA

npm i -S bulma

TIP: Sass es otra opcion que con el VueCLI actual se puede instalar por defecto usando el comando o vue ui, ademas te permite elegir con que loader lo deseas utilizar y funciona de maravilla.

👌