Requiring SASS in Angular 2 components with webpack

[mark-norgate]

I am trying to require my SASS in my components, like this:

@Component({
    selector: 'signup',
    directives: [RouterOutlet, RouterLink],
    styles: [require('../sass/signup.scss')],
    template: require('./signup.component.html')
})

but my browser is complaining: EXCEPTION: TypeError: s.replace is not a function

I previously had the require outside of the component definition and it worked fine; but now I have another component I have to put the styles inside the components.

I have the correct loaders going on for SASS:

{
    test: /\.scss$/,
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
}

What am I doing wrong?

[davidarnarsson]

Have you tried calling .toString()? As in, styles: [ require('../sass/signup.scss').toString() ] ?

I did something similar for stylus, using the css-loader.

[abdulhaq-e]

Change the loaders to:

{
    test: /\.scss$/,
    loaders: ['raw-loader', 'sass-loader?sourceMap']
}

[mark-norgate]

Thank you @davidarnarsson , that works. And @abdulhaq-e I tried implementing your suggested change but it ruined my layout unfortunately. The problem now remains that both styles are being loaded on both pages.

The main problem is the background colour, which is different for both components. I have this:

html, body {
    height:100%;
    background-color: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

but the background-color for each component is the same, even though I am specifying a different colour in each scss file. This is more of an issue with Angular 2 so I will go elsewhere for the answer.

Unless you know.

Thanks for your help. Mark

[manavsehgal]

Opened #199 consolidating UI/style related issues.

[PatrickJS]

closing for #199

[ilio]

try

require('../sass/signup.scss');

@Component({
       selector: 'signup',
       directives: [RouterOutlet, RouterLink],
       template: require('./signup.component.html')
})

[bitterloa]

YASS! @davidarnarsson, using require('./file.scss').toString() helped. Thanks

[smithad15]

If you don't want to have to write .toString() everywhere, you could use this loader instead: https://www.npmjs.com/package/css-to-string-loader

[lpalli]

Anyone was able to run the test after adding scss files?

[alvipeo]

I gave up. I use Bootstrap 3 now, so everything works.

[lpalli]

I founded the solution to run the test (karma) after adding scss files, I added the loader also in the config/webpack.test.js file, not only in the config/webpack.common.js file.

[alvipeo]

Can we have a separate branch for Bootstrap 4? I think it might be useful...