Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

702
Visualizações
How to use global scss files in angular-cli project

I am new to Angular 4 and to the Angular-CLI. I cannot find any solution how to use root scss/css files for the whole application. Thereby, my question, how to use global scss files in the project?

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Create a styles folder in the src folder, then you can import everything there into styles.scss which is also in the src folder. This is how mine looks:

// Vendors
@import './styles/vendors/_exports';

// Utils
@import './styles/utils/_exports';

// Globals
@import './styles/globals/_exports';

// Partials
@import './styles/partials/_exports';

// Components
@import './styles/components/_exports';

Every _exports file is importing all the files in the particular folder to make it easier to import it into the styles.scss file.

I hope this helps.

EDIT:

As pointed out in the comments, make sure that styles.scss is added to styles in the angular-cli.jsonfile or it will not work.

about 4 years ago · Santiago Trujillo Relatório

0

You will need to add the following code to you angular-cli.json (angular.json on A6+)

"stylePreprocessorOptions": {
    "includePaths": [
      "../src/assets/scss/base"
    ]
  },

Where base is the folder containing the file/s you want to @import.

Then you can just

// BEFORE
@import '../../100TIMES/variables';
// NOW
@import 'variables'; // src/assets/scss/base/_variables.scss

Thanks.

Note: YOU NEED TO REBUILD THE PROJECT TO RELOAD angular-cli.json (angular.json on A6+)

about 4 years ago · Santiago Trujillo Relatório

0

There is also the option to add your css/scss file to the "styles" array in the .angular-cli.json file. There may be a "best practice" that gets broken by doing this - I'm not really sure of the rules. But if you include a file in that array, it will be injected as though it were loaded at the top of index.html.

Here is an example from one of my projects: (/.angular-cli.json) ... "styles": [ "styles.scss", "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/mdi/scss/materialdesignicons.scss" ], ...

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda