less - pages - aspnet web
Cómo compilar Twitter Bootstrap 3.0 LESS utilizando Asp.net MVC 5 y Web Essentials 2013 (2)
He configurado Visual Studio 2013 RC y Web Essentials 2013 . Estoy tratando de crear un servicio en la nube de Azure y un rol web utilizando ASP.Net MVC 5 . Instaló Twitter Bootstrap Less Source 3.0 y quiso agrupar todos los archivos menos usando Web Essentials 2013.
No obtuve ninguna ayuda o documentación sobre cómo hacer un paquete de bootstrap.less en el tiempo de ejecución o compilarlo en un bootstrap.css en el momento del diseño.
¿Alguna idea de cómo se puede hacer? ¿Hay alguna manera más simple que BundleTransformer.Less .
ACTUALIZACIÓN (29-SEP-2015):
Salga de Web Essentials y use LESS Compiler junto con su complemento Clean CSS.
- Descargue e instale Node.js (32 bits) para Windows.
- Abra el indicador de comandos de node.js.
- Instala LESS usando el comando: npm install -g menos
- Instale less-plugin-clean-css con el comando: npm install -g less-plugin-clean-css
- Vaya a Propiedades del proyecto> Crear eventos y copie y pegue a continuación el comando para crear previamente el cuadro de línea de comando del evento :
lessc "$ (ProjectDir) Content / bootstrap / bootstrap.less" "$ (ProjectDir) Content / bootstrap.css" --clean-css = "- s1 --advanced" - Genere el proyecto y busque bootstrap.css en la ubicación especificada. (Si aún no lo ha hecho, es posible que deba habilitar la configuración de "Mostrar todos los archivos" en el Explorador de soluciones.)
- Incluya el archivo bootstrap.css en su proyecto. Ver las propiedades del archivo y establecer su "Acción de construcción" en "Contenido". Actualice BundleConfig para incluir este archivo compilado en su StyleBundle.
- Seleccione todos los archivos .less de la carpeta / Content / bootstrap . Ver las propiedades del archivo y establecer su "Acción de construcción" en "Ninguno".
ACTUALIZACIÓN (24-SEP-2014):
Dado que Twitter Boostrap ha cambiado de RECESS a Grunt, recomendaría que los nuevos usuarios que buscan esta solución consideren: LESS o Grunt .
Tenga en cuenta que ninguna de las soluciones mencionadas aquí utiliza Web Essentials 2013.
Finalmente, decidí usar RECESS recomendado por Twitter. Si desea usar bootstrap 3 pre-construido menos en css usando Visual Studio 2013 (RC / RTM), puede seguir los pasos que se detallan a continuación:
- Descargue e instale Node.js (32 bits) para Windows.
- Instale el paquete RECESS npm globalmente - Abra el símbolo del sistema node.js y ejecute el comando:
npm install recess –g - Use NuGet Library Package Manager e instale el paquete Bootstrap Less Source 3.0.0 en su proyecto Asp.Net MVC 5 Web / Azure Web Role.
- Vaya a Propiedades del proyecto> Crear eventos y copie y pegue a continuación el comando para Pre-compilar línea de comandos del evento: cuadro:
recess "$ (ProjectDir) Content / bootstrap / bootstrap.less" --compress> "$ (ProjectDir) Content / bootstrap-compiled.css" - Genere el proyecto y busque bootstrap-compiled.css en la ubicación especificada. (Si aún no lo ha hecho, es posible que deba habilitar la configuración de "Mostrar todos los archivos" en el Explorador de soluciones.)
- Incluya el archivo bootstrap-compiled.css en su proyecto. Ver las propiedades del archivo y establecer su "Acción de construcción" en "Contenido". Actualice BundleConfig para incluir este archivo compilado en su StyleBundle.
- Seleccione todos los archivos .less de la carpeta / Content / bootstrap . Ver las propiedades del archivo y establecer su "Acción de construcción" en "Ninguno".