css - recorrer - Usando Sass en angular 2

formularios en angular 6 (3)

Estoy tratando de configurar Sass en mi proyecto Angular 2 . Básicamente, según entiendo, hay dos formas de crear un proyecto angular 2

1) Usando angular-cli ( https://github.com/angular/angular-cli )

Me referí a la respuesta mencionada en https://stackoverflow.com/a/41541042/2868352 y pude usar scss archivos scss en el proyecto angular 2, todo funcionó muy bien, pero no pude ubicar el archivo css generado desde el archivo scss en la carpeta del proyecto. ¿Alguien podría explicar la razón por la que no se generó ningún archivo css pero aún así funcionó?

2) Usar quickstart seed ( https://angular.io/guide/quickstart )

No pude obtener ninguna información sobre cómo configurar sass en el proyecto de inicio rápido. ¿Alguien tiene alguna idea sobre el uso de sass en el proyecto de inicio rápido proporcionado por angular?

¡Gracias por adelantado!

Hay dos escenarios principales aquí.

Al crear un nuevo proyecto de CLI angular, use el comando CLI
ng new my-angular-app --style=scss
Cuando ya se haya configurado un proyecto de CLI angular, use el comando CLI
ng set default.styleExt scss

En el caso 2, necesita convertir manualmente los archivos .css existentes. También puedes usar sass o less lugar de scss

Echa un vistazo al artículo completo aquí.

Uso de SCSS / SASS / LESS en el proyecto de CLI angular

Te puedo explicar la primera.

Si está utilizando el ng server los archivos compilados se guardan en una carpeta oculta en su proyecto.

Si está utilizando ng build , puede ver sus archivos compilados en la carpeta / dist. En esta carpeta puede encontrar sus estilos generales en los estilos de archivo. [Hashversion] .css, pero los estilos de componentes locales están incluidos dentro de main. [Hashversion] .js por Webpack.

Angular-cli usa webpack y, si desea obtener más información, consulte Webpack Docs.

ACTUALIZAR

En el segundo caso, hay que compilar sass manualmente. En la carpeta de aplicaciones, tenga un app.component.ts que se compilará en la misma carpeta que app.component.js con el compilador de Typescript. Así que tienes que hacer lo mismo con sass. Importar el archivo CSS en el componente.

@Component({ selector: ''my-app'', template: `<h1>Hello {{name}}</h1>`, stylesUrl: [''app/app.component.css''] }) export class AppComponent { name = ''Angular''; }

Notó que no puede usar la ruta relativa porque todo será solicitado desde el directorio raíz.

Crea un app.component.sass y coloca tus estilos dentro.

Luego ejecute el compilador de Sass que compila app.component.sass en app.component.css

Ejecuta el servidor y funcionará.

[Verifique la parte editada al final de esta respuesta en caso de que esté usando cli angular]

Explicando cómo usar sass en ''semilla de inicio rápido'' ( https://angular.io/guide/quickstart ) ( https://angular.io/guide/setup#download )

Por favor, siga estos sencillos pasos:

Paso 1: Configurar la semilla de inicio rápido

Utilice los siguientes comandos para configurar

npm install npm start

Verá ''Hola angular'' en el navegador.

Paso 2: instalar node-sass y sass-loader

Usa los comandos mencionados abajo para instalar

npm i node-sass -S npm i sass-loader -S

Ahora puede ver ambos agregados en sus ''dependencias'' dentro del archivo ''package.json''.

Paso 3: Crea 2 carpetas para el código Sass y el código Css

Cree dos carpetas con cualquier nombre en la carpeta "quickstart-master". En este caso, por ejemplo: "sass_folder" y "css_folder". Ahora cree un archivo de demostración ''demo.sass'' y colóquelo dentro de ''sass_folder''. Puedes poner un simple código sass en este archivo .sass. Se verá así:

$font-stack: Helvetica, sans-serif $primary-color: #000 body font: 100% $font-stack color: $primary-color

Paso 4: hacer cambios en el archivo ''package.json''

Agregue scripts para construir y ver el código Sass presente en "sass_folder". Después de la compilación, el código CSS resultante debe almacenarse en "css_folder". Después de los cambios, los "Scripts" en el archivo ''package.json'' deberían verse así:

"scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently /"npm run build:watch/" /"npm run serve/" /"npm run watch:sass/"", "pree2e": "npm run build:e2e", "e2e": "concurrently /"npm run serve:e2e/" /"npm run protractor/" --kill-others --success first", "preprotractor": "webdriver-manager update", "protractor": "protractor protractor.config.js", "pretest": "npm run build", "test": "concurrently /"npm run build:watch/" /"karma start karma.conf.js/"", "pretest:once": "npm run build", "test:once": "karma start karma.conf.js --single-run", "lint": "tslint ./src/**/*.ts -t verbose", "build:sass": "node-sass sass_folder/ -o css_folder", "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/" }

Eche un vistazo a ''start'', ''build: sass'' y ''watch: sass'' solamente.

Paso 5: Ejecutar la aplicación

Ahora puedes ejecutar la aplicación usando el siguiente comando:

npm start

Verá el código css compilado en "css_folder" con el mismo nombre de archivo ''demo.css''. Se verá así (en este caso):

body { font: 100% Helvetica, sans-serif; color: #000; }

Ahora, si realiza algún cambio en el archivo .sass, se reflejará dinámicamente en el archivo .css mientras el script está observando el código.

Si muestra un error, cierre el archivo .css cuando realice cualquier cambio en el archivo .sass.

Nota: para el código scss puede seguir los mismos pasos. Solo debes poner el archivo .scss en "sass_folder" en este caso.

[editado] En caso de que quieras usar Angular CLI:

En el momento de la creación del nuevo proyecto Angular, utilice los cmnds mencionados a continuación:

Para el sass:

ng new Demo_Project --style=sass

Para scss:

ng new Demo_Project --style=scss

Para cambiar el estilo existente:

ng set defaults.styleExt scss

Después de esto puedes usar Cli normalmente.