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 [email protected]

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

Pdt: Odio Bulma, sorry es algo personal C:

¿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!

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

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 😉

Más plugins =(

SASS y BULMA

Podemos usar SASS desde el momento en que estamos creando la aplicación con la vue-cli.

Bulma es un framework de CSS. Documentación oficial

Lo instalamos con npm i bulma

Yo prefiero Less

npm i -S bulma

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

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”>

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.

👌