0

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?

Iva
  • 91
  • 2
  • 7
  • No I just create a sample – Iva Apr 26 '16 at 12:34
  • Did you *look* at your compiled CSS? – cimmanon Apr 26 '16 at 12:35
  • { test: /^((?!materialize).)*\.css$/, loader: 'raw-loader' } – Iva Apr 26 '16 at 12:56
  • That can't seriously be your CSS, are you sure you're looking at the right file? – cimmanon Apr 26 '16 at 12:57
  • I'm have very bad imagination haw webpack do scss magic. I configure webpack as it provided [there](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components). And I don't have css file at all. – Iva Apr 26 '16 at 13:15
  • how do you import the .scss in your component?, and add a 's' to loader, when you use the array syntax – cebor Apr 26 '16 at 13:21
  • We can't help you unless you're able to show your compiled CSS. There are multiple reasons why styles might be crossed out in the console. – cimmanon Apr 26 '16 at 13:59
  • I am also facing the issue mentioned in the question. Not able to use vars in scss file. I am using the correct webpack.config file as you also suggested. See my post here : stackoverflow.com/questions/40401501/ – Peter Nov 04 '16 at 05:09

2 Answers2

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.

Pytth
  • 4,008
  • 24
  • 29
  • I'm not try to change anything. Just create scss variable and use it in test class. – Iva Apr 26 '16 at 13:55
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
  }
]
cebor
  • 6,546
  • 4
  • 24
  • 31
  • How does this answer the question, exactly? Were you able to reproduce the OP's problem? How does this fix it? – cimmanon Apr 26 '16 at 13:30
  • The syntax of the webpack config ist wrong. See https://webpack.github.io/docs/configuration.html#module-loaders – cebor Apr 26 '16 at 13:40
  • So in other words, you should be voting to close this as a typographical error, yes? – cimmanon Apr 26 '16 at 13:53
  • Is there an option to close an question in case of a syntax error ? – cebor Apr 26 '16 at 14:11
  • 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.) – cimmanon Apr 26 '16 at 14:15
  • @cebor - I am also facing the issue mentioned in the question. Not able to use vars in scss file. I am using the correct webpack.config file as you also suggested. See my post here : http://stackoverflow.com/questions/40401501/how-to-use-sass-in-angular2-application – Peter Nov 04 '16 at 05:09