Angular 2 SCSS styling

Question

I wrote scss mixin in main root file style.scss. when i try to access it in my home component it gives me error as No mixin named gradient.

Please help do i need to include styles.scss file in my component

//linear gradient color
$from: #1279C9;
$to: #439FE7;

@mixin gradient($from, $to) {
    /* fallback/image non-cover color */
    background-color: $from;
  
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient($from, $to);
  
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient($from, $to);
  
    /* Opera 11.10+ */
    background-image: -o-linear-gradient($from, $to);
  }

if still not working, share it some where and share url – rijin Jan 20 '18 at 19:32 — rijin, Jan 20 '18 at 19:32

score 0 · Answer 1 · answered Jan 20 '18 at 10:47

0

Try to define the mixin in some master file in some easy-to-access location (let say /app/scss) and then import that master into the component style where it should be user like

@import '~app/scss/master'

Mixin should be recognized then.

answered Jan 20 '18 at 10:47

Kristian

501
2
13

i added thart in style.scss. still do i need to include that file? – Jay Jan 20 '18 at 12:02
Not sure if you really have to, that would depend on the compilation / bundling process ... but since I know nothing about your app and its building sequence I can only presume that if the name is not recognized, you have to make the app to see the source file ... – Kristian Jan 20 '18 at 12:10
Do you use Angular CLI? If you define some variable, let say $red: #FC625D; in your style.scss can u use it in your component style, let say you have h1 { color: $red } ? – Kristian Jan 20 '18 at 12:16
Do you really need that mixing actually? It just prefixes the gradient ... autoprefixer will handle that ... most browser ever do not use prefixes for gradient backround ... – Kristian Jan 20 '18 at 12:22

score 0 · Answer 2 · answered Jan 20 '18 at 19:19

0

i did this using master.scss file and i included this file in every components scss file

answered Jan 20 '18 at 19:19

Jay

375
2
5
17

I do not get the point of your answer, is it just saying that it worked, or you mistyped this and by mistake posted an answer rather than comment? I am not sure if my answer helped you or I failed to help you. – Kristian Jan 25 '18 at 15:42

Angular 2 SCSS styling

2 Answers2