SASS y BULMA

8/53
Recursos

Aportes 16

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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=鈥渁pp鈥>

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.

馃憣