¿Cómo configuro Bootstrap SASS / SCSS con Visual Studio 2013?

Solución:

En realidad, esto es bastante simple siempre que esté ejecutando Visual Studio 2013 Update 2+ y (creo que es necesario, no estoy seguro) el excelente complemento Web Essentials de Mads Kristensen.

Primero, actualice su paquete Bootstrap NuGet para que coincida, lo más cerca posible, con la versión disponible en el puerto oficial de Twitter Bootstrap SASS (originalmente lo escribieron en LESS y lo transfirieron a SASS).

En el momento de escribir este artículo, NuGet está en 3.3.2 y el puerto SASS está en 3.3.3, aunque el tarball dice lo contrario.

Aquí está el puerto SASS en GitHub:

https://github.com/twbs/bootstrap-sass

Luego, elimine los siguientes archivos de su proyecto:

• Contentbootstrap.css
• Contentbootstrap.min.css

Luego descargue el zip “tar ball” de GitHub arriba y descomprímalo en algún lugar. Solo necesitará los archivos SCSS, así que abra la siguiente carpeta:

bootstrap-sass-3.3.2.tarbootstrap-sass-3.3.2bootstrap-sass-3.3.2assetsstylesheets

Copia el bootstrap subcarpeta y péguela en su proyecto Content carpeta.

Ahora, agregue un nuevo elemento al Content carpeta en Visual Studio y elija “SCSS Style Sheet (SASS)” y llámelo bootstrap.scss

Es importante agregar un nuevo elemento, ya que permite la generación automática de elementos, si solo agrega un elemento existente .scss archivo no genera / compila el CSS.

Abre el nuevo bootstrap.scss archivo y elimínelo de cualquier código predeterminado.

Ahora regrese a su carpeta descomprimida y abra el _bootstrap.scss archivo en un Bloc de notas y luego copie el contenido y péguelo en el bootstrap.scss archivo en Visual Studio.

Guarde el archivo y se compilará bootstrap.css! También producirá el .map archivo que utilizan los editores (como las herramientas de desarrollo del navegador de Chrome) para mapear el CSS gen’ed de nuevo a su marcado SASSy original. Inteligente.

Haga clic derecho en el .css archivo para minificarlo y elija la opción de minificar automáticamente en los cambios.

Dado que ahora ha regenerado los mismos archivos que estaban allí originalmente, sus paquetes simplemente funcionarán y el sitio aparecerá como antes.

Ah, y para editar sus variables, como las fuentes, consulte:

Contentbootstrap_variables.scss

Esto es lo que hice [here in July of 2019] en Visual Studio 2017;

Instalé el “Los autores de Bootstrap, Twitter Inc.” versión de bootstrap.sass (v4.3.1) directamente desde la nuget.org servidor. Luego busqué por todas partes información sobre exactamente de qué archivo (s) iba a querer ‘compilar’ .scss para .css y finalmente encontré esta publicación.

La respuesta de @ SandroPaetzold parecía un poco … excesiva / un poco confusa [given how much easier it is to install the package with NuGet], así que decidí escribir mi proceso en caso de que ayude a cualquiera que quiera usar la versión SASS de Bootstrap 4 en su ASP.Net MVC proyecto / solución.

Solo uso WebCompiler de Mads K, así que tuve que crear el compilerconfig.json expediente [required by the WebCompiler tool]. Para esto, pude copiarlo de otro proyecto que acababa de completar, luego hice los cambios necesarios para bootstrap, que era simplemente compilar el bootstrap.scss archivar en mi ~/Content carpeta. De esta manera, no tuve que tocar el BundleConfig.cs expediente.

(Ahora, es cierto, si tuviera más que decir, 2-3 archivos .css, los habría puesto en algo como ~/Content/css como hice con ese otro proyecto que mencioné, pero no sentí que fuera un paso necesario en este caso).

Entonces, la totalidad de mi compilerconfig.json fue simplemente:

[
  {
    "outputFile": "Content/bootstrap.css",
    "inputFile": "Content/bootstrap/bootstrap.scss",
    "options": {
      "sourceMap": true
    }
  }
]

En este punto, entré en el Explorador de ejecución de tareas, hizo clic derecho en Content/bootstrap/bootstrap.scss (dentro del panel de la izquierda), luego seleccionado Antes de construir desde el Fijaciones Menú de contexto.

Finalmente, dado que se están construyendo y, por lo tanto, realmente no es necesario registrarlos, agregué Content/*.css para mi .gitignore expediente. (Nota: Tu camino puede variar.)

En mi opinión, esta es la menor cantidad de rotación para completar este proceso, al menos en comparación con las otras respuestas. (Reconociendo que algunas de esas respuestas, si no todas, se refieren a otras versiones anteriores de Bootstrap y, por lo tanto, pueden requerir un poco de trabajo adicional.)

Estos son los pasos que se deben seguir para instalar Bootstrap 4.x con ASP.NET MVC con Visual Studio 2018. Supongo que ya actualizó su paquete Bootstrap NuGet e instaló la última versión de Web Essentials como se menciona en.

1. Descarga Bootstrap y descomprime los archivos fuente
2. Borrar TODOS Bootstrap archivos CSS de su /Content directorio
3. Mueve el scss carpeta a la carpeta `/ Content ‘de su proyecto
4. (Opcional) Cambiar nombre /scss para /bootstrap
5. Compilar bootstrap.scss
6. Abierto AppStart/BundleCongig.cs
7. Cambio ~/Content/bootstrap.css para que coincida con la ruta de su archivo Bootstrap

---

---

Utiliza Nuestro Buscador