He trabajado en el proyecto angular 2 y he usado angular-cli. Me gustaría reemplazar todos los archivos css con scss. cual seria la forma mas facil de hacerlo? ¿O hay una línea de comando que pueda manejarlo sin tener que hacerlo manualmente?
Simplemente tuve que hacer esto en un proyecto existente y reuní un montón de información de varios lugares, principalmente de esta pregunta similar de stackoverflow . Aquí hay un conjunto de acciones de línea de comando (que funcionó para mí en Mac OSX)
# rename all your current files find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \; # change angular cli config file to include styles.scss instead of styles.css sed -i -e 's/styles.css/styles.scss/g' .angular-cli.json # now we need to go thru and fix up all the places where ts files refer to .css files # there's probably a better way (and will only work if you don't have multiple css files in a component) # this is what I did find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g' {} + rm -r *.ts-e # fix for future generates styles ng set defaults.styleExt scss # Add node-sass npm module npm install node-sass --save-dev # or if you are using yarn, like me: yarn add node-sass --devPaso 1: cambie el nombre de todos los archivos css de css (style.css) a scss (style.scss)
Paso 2: - Si está utilizando una versión anterior (hasta la 4), compruebe el archivo .angular-cli.json y reemplace css por scss en el siguiente código "predeterminado": { "styleExt": "scss", "component": {} }
if you are using latest version (6) than please check angular.json file and replace css to scss "schematics": { "@schematics/angular:component": { "styleext": "scss" } },Y reiniciar el proyecto
Nota: - Para angular (hasta 4) básicamente usamos sass-loader para convertir scss a css
pero para la última versión (6) usamos node-sass para convertir scss a css, por lo que si recibe un error como (Falló la compilación del módulo: Error: sass-loader requiere node-sass > = 4. Instale una versión compatible) que por favor use el siguiente comando
npm reconstruir nodo-sass
Sí, ahora tengo que hacer esto y agregar un paso para sass-convert porque angular decidió fusionar esto en
https://github.com/angular/angular-cli/pull/13444
-.-
Muchas gracias 'Alex Águila'