Repository navigation
Using global scss variables in my components styles. #1253
Description
Activity
There isn't any such functionality in the CLI itself, no. There is sass compilation but that's it.
Reacted by Aleksei Lebedev, Tika Pahadi, Manish, waleed-shahzaib, Shubham Tiwari, Jeff, Maicon Wagner, msobolevdivorce, Alameer Ashraf Hassan, 天海るり and 7 moreReacted by Kemal BeyazReacted by waleed-shahzaib, Hemant Sankhla and Gabrielle Campagna@a5hik A temp fix for that is to make a _varaibles.scss and import where ever you use your variables. Not the cleanest way.
Reacted by Pranjal Mittal, Grégoire Chauvet, N8 May, Ahmed Musallam, Martin Pultz, Luiz Mitidiero, Viktor Salnichenko, David Choi, Antoine D., Sebastian Marzec and 6 moreReacted by waleed-shahzaib, Plavika, Rohan Shenoy and Sofía Ignacia Zambrano MericqReacted by Yugloocamai, Anatoly Buchatsky, Rafael Bitencourt, Carlos Roso, DD, Luiz Mitidiero, Lluis Nieto, Hamza Hamidi, Alessandro Mitelli, Bohdan and 11 moreWhat @AmarildoK suggested could actually be incorporated as a feature into angular CLI. There could be a shared scss file somewhere and new
.scssfiles in generated components could use have an import line to include the shared scss file by default.Reacted by Bryan Jackson, Hugo Nogueira, cedvdb, Christian TD, Karel-Jan, Andrea, Royal Dev, Jason Cox, Rohan Shenoy and Ivan SanchezYup. Certainly need this feature.
Reacted by Vincenzo Militello, Chris Brown, Connel Hooley, Antony Derham, Mateusz Gałganek, Ben Stein, Ramesh, Akkora, Grégoire Chauvet, Corbin Crutchley and 123 moreReacted by waleed-shahzaibReacted by Ahmed BenyahiaStill nothing?
Any update about this people?
Any update on this?
I'm quite new to frontend, but I'm trying to declare some global SCSS vars for my Angular app, and I just want to be sure that it's not intended that what I'm doing should work.
I'm running angular-cli 1.0.0-beta.21. In my angular-cli.json file, in apps[0].styles, I reference my
styles.scssfile.styles.scss
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700'); @import '_vars'; @import 'reset'; @import 'global'; @import 'index';_vars.scss
/* VARIABLES */ /* brand colors */ $color-accent: #2980b9; $color-primary: #ecf0f1; $color-subtle: #aaaaaa; /* rarity */ $color-rarity-legendary: #4c139d; $color-rarity-ascended: #fb3e8d; $color-rarity-exotic: #ffa405;When I try to reference a variable declared this way in a component's
.scssfile, the console reports that the variable hasn't been declared.Is this failing because of something I'm doing wrong, or is this not possible under the current version of the CLI?
Thanks so much for your time and help.
Reacted by Can Güney Aksakalli, Martin Schneider, nexus, Simba Cod3, Charles Harris, Michał Terczyński, hungry, Luca Basilico, Sune Brøndum Wøller, Thalaivar and 16 moreReacted by Cristian and Adem Simsek- added a commit that references this issue
on Dec 1, 2016 can someone explain to me how the SASS transpiling happens?
I assume this happens:- ng-cli transpiles global sass file to css
- find all component specific sass and transpile those to css
- concatenate all that css
is that correct?
Reacted by Thomas Ott, Simba Cod3, azharuniverse, Pandian47 and Rohan ShenoyReacted by Yash KadaruI have the same problem with global sass variables. Also the transpile is for me at the moment a blackbox
What we do is create a folder called shared and under it a styles folder. We then create our sass there. Finally from your top level component typically "app.component.scss" just import.
@import './shared/styles/default';Forgot you also on the top level component need to set View Encapsulation.
encapsulation: ViewEncapsulation.None
Reacted by Alex Grant, Thomas Ott, proAppleEater, Eduardo Bennertz, Corey Werner, rejidasan, Aaron Sherwood, Tingan Ho, Hossein Bajan, mariaalavez and 4 moreReacted by dabder, Corsseir, Balaji Rajendran, flackjap, Anthony Johnston, Puria Rad Jahanbani, Andriy, sepo27, maxkuzmin, MOKHTARI Anouar and 32 moreReacted by CodeCro, RobertBorkowskiITM and Off XaTAReacted by Ryan Cole, patricknazar, Ryan Donahue, Yevhenii Chubar, derek, Antoniy Zyumbyulev, Srinivas, Alejandro Ñáñez Ortiz, Aymeric Dominique, Biser Atanasov and 22 moreReacted by Thomas Ott@greenchapter yeah.. I wish there was some good documentation for it. if you find anything, do let me know.
23 remaining items
@daniel-seitz perhaps a bit of confusion -- this issue is going over many different topics.
Using
@import “~variables.scss”;is great if your scss is inside of a folder withinnode_modules(unmodifiable).Adding
scsspaths intoangular.cli.jsonis required if you want "simple" imports for scss that are defined in your project.Without adding the appropriate scss path(s) into
angular.cli.jsonyou will have to do relative path imports.
For example:
@import "./src/assets/private/sass/base";should be simplified into@import "base";
(assuming you've added the correct entry into .angular.cli.json)As for automagically importing
variablesorbaseinto all scss files, that may be a nice feature.
It could be done similar to this comment:
webpack/sass-loader#218 (comment)I do think if this feature was added it would need to be a new property of
.angular.cli.json.Reacted by ShibikoReacted by ShibikoReacted by ShibikoThank you for the reply @hellofornow. I too would welcome this feature however from my current understanding its not trivial to implement this.
I was not clear enough with my question for you, so one clarification:
Look out for the ~ symbol.If one just imports like this
@import “variables.scss”;, then yes this file needs to be inside node_modules - which is bad, don't do this.BUT! if you do
@import “~variables.scss”;, so with a~, then you can import relative to your src folder. That's it, no other config. (Since we're in the angular-cli repo here I won't go into other structures and what we need to configure that 'home'-path)Keeping that in mind, what's the need to do this then? I found no documentation.
"stylePreprocessorOptions": { "includePaths": [ "scss" ] }Then I also did some tests (also with lazy loaded modules, ...) and - as we all know - we would not expect this to happen: Angular CLI with Sass compilation encapsulates the styles so that they won't have effects on other parts of the system.
When using import, we circumvent this and can use all variables, however when mixing variables with real css we also can cascade.
PROBLEM here is that each time use import, that 'real css' gets into the resulting file inline, over and over - which again goes against cascading and worse, makes our dist bigger.
The SOLUTION would be to make the variables (mixins, ...) available to the compilation so that it just knows about them and translating on the fly, nothing else.
I'd like to have these variables, or at least the starting point, in src/styles.scss as it is default but likely needs to be configurable.
If I find the time, I will dig deeper as I know that it's not just us who want this...
Reacted by Shibiko and mishkolesnikovAm I wrong or AlexHenkel's comment on Jan 23 solves the problem ?
I have my _variables.scss defined
$primary:rgb(211, 14, 127) !default;So then I can use this variable in a component
.navbar-light .navbar-nav .active a::after { border-bottom: 5px solid var(--primary); } .user-view { background-color: var(--primary); color: white; }To clarify, my styles.scss looks like:
@import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';not sure if OP had same problem but works for me, cause I don't have to hard code the default color
Reacted by Alejandro HenkelSorry if this is off topic, but per my understanding in this thread, it seems that SASS process files more in isolation, then say LESS did, would that be correct?
In essence, the use case is of being able to use a
@mixinwhich sets some color variables in one file at an "app" level, and hope for that cascade down into all the other components (even if node_modules).variables.css
$color: 'green'; $theme: 'generic'; @mixin setTheme($theme: 'generic') { @if($theme == 'a') { $color: red; } @if($theme == 'b') { $color: blue; } }
app.component.css
@import "~bootstrap/scss/bootstrap.scss"; @import "./styles/variables.scss"; @include setTheme('a');
header.component.css
@import "./styles/variables.scss"; @include setTheme('a'); // only changes red if this is set manually, which is hardcoded and not ideal for a reusable component from npm h1 { color: $color; }
In this case, anything processed in my app component using
$colorwould change red, but anything in my other components would not change color (would stay the default color of green) unless I manually call setTheme in all my components, which doesn't make them very reusable.Thanks, and hope that wasn't too confusing! Any thoughts would be greatly appreciated!
I was able to get something working for my use case using sass-vars-loader.
Just an FYI, it looks like using the tilde to reference 'src' from the component level ala
@import '~scss/variables';is buggy (not working) in Angular 6 (issue).@import '~src/scss/variables';and@import './src/scss/variables';seem to work, though. Just a PSA if anyone runs into problems.Reacted by Wes Kenyon, Marine Landraudie, david g., Gabrielle Campagna, Rien Heuver, Nguyen Minh Nhut, Owen Buckley, bmtheo and 忆年I can't believe how difficult Angular makes using SASS. I'm about to switch to React/webpack
Reacted by Gabrielle Campagna, Brynjar Bragason, Constantin Chirila, Braian Silva, staticfire, yang xin and Leandro Mantaras (Serfe.com)Reacted by Mick Lawitzke, amir toole, David Thong Nguyen and Geoffrey TestelinReacted by yang xin and Anton Erokhinthis is ONE OF THE MOST COMMON THINGS I CAN IMAGINE. How can you get that wrong?!
also: you can make this work easily via webpack and sass-loader itself. Man it would be great if ng cli offered a way to extend the webpack conf out of the box. Like Vue does.
Reacted by Constantin ChirilaReacted by Mick Lawitzke, Sandor Drieënhuizen, Cesar Gutierrez, LousyJohnny and Jon ClarkGuys this is how sass/scss works and has nothing todo with Angular. Just import your variables and you are good to go OR use a global stylesheets file.
Reacted by Sandor DrieënhuizenReacted by Constantin Chirila, Victor S., Nicholas Davis, Victor Grados, Verdi, Johnathan and Clipota AlexandruSo, in conclusion, if you
@importsomething but you doesn't use a var or mixing of that thing you've imported, it isn't included in the final bundle, right?Is there a way to use sass variables globally without the need to manually import in every single component? Perhaps this would be bad practice anyway as every component then has access, even if t doesn't need it...
Reacted by codehunter12345Do one thing. It will work.
importvariable.scssfile in the component where you want to use variables, it will work.
This is not standard, if something standard arrives, it is easily undo-able.Reacted by Nikhil and Felix GliescheReacted by JohnathanReacted by NikhilReacted by NikhilWhat if i want separate css bundles, that i can switch at runtime, each bundle using its own _variables.scss?
Reacted by Justin Daniel and Anand DhageThis issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
- locked and limited conversation to collaborators
on Oct 13, 2019
angular-cli: 1.0.0-beta.6
node: 6.2.1
os: darwin x64
Hi I have bootstrap override varaibles.scss, which I want to use as a Global style for my app.
So, I depend on these variables on every component.scss I write. Is there a way I can add a global dependency of variables.scss.
Right now I do import the variables.scss manually in every scss file that require.