scss variable in Angular 2

Question

I'm using angular 2 + webpack + scss. And by some reason I cannot use scss variable:

 $white: #fff;
.test{
 color: $white;
}

In style console I see that color is not set (strikeout).

My webpack config:

module: {
loaders: [
  { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ['raw-loader', 'sass-loader']
  }
]

Does someone know what it could be?

{ test: /^((?!materialize).)*\.css$/, loader: 'raw-loader' } — Iva
– Iva, Commented Apr 26, 2016 at 12:56
That can't seriously be your CSS, are you sure you're looking at the right file? — cimmanon
– cimmanon, Commented Apr 26, 2016 at 12:57
I'm have very bad imagination haw webpack do scss magic. I configure webpack as it provided there. And I don't have css file at all. — Iva
– Iva, Commented Apr 26, 2016 at 13:15

Pytth · Accepted Answer · 2016-04-26 13:29:20Z

1

If the styles are crossed out in your browser, it means that scss is doing what it needs to do but other styles have a higher selector specificity for the same properties you are trying to change.

answered Apr 26, 2016 at 13:29

Pytth

4,1961 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iva Over a year ago

I'm not try to change anything. Just create scss variable and use it in test class.

cebor · Accepted Answer · 2016-04-26 13:48:45Z

0

You have a syntax bug in your webpack config. You have to use loaders not loader! See: https://webpack.github.io/docs/configuration.html#module-loaders

module: {
loaders: [
  { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // loaders not loader
  }
]

edited Apr 26, 2016 at 13:48

answered Apr 26, 2016 at 13:27

cebor

6,5665 gold badges26 silver badges31 bronze badges

6 Comments

cimmanon Over a year ago

How does this answer the question, exactly? Were you able to reproduce the OP's problem? How does this fix it?

cebor Over a year ago

The syntax of the webpack config ist wrong. See webpack.github.io/docs/configuration.html#module-loaders

cimmanon Over a year ago

So in other words, you should be voting to close this as a typographical error, yes?

cebor Over a year ago

Is there an option to close an question in case of a syntax error ?

cimmanon Over a year ago

Yes, "off-topic because..." > "This question was caused by a problem that can no longer be reproduced or a simple typographical error.". Its usually helpful if you also leave a comment pointing out where the typo is when you do this to help future voters see the error as well. (Do note that the OP has already made a mistake in posting their code with the question.)

|

Collectives™ on Stack Overflow

scss variable in Angular 2

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related