CODEWITHSUNDEEP
angularsasswebpack
kub1x
kub1x

Reputation: 3552

Exporting SCSS file from a npm package

I'm writing an Angular 2 app. I separated a component from this app to its own npm package called say ng2-wizard. This package contains my compoennt's code AND its styles in SCSS file wizard.scss.

I tried including the scss file in my component using these two ways: 

// 1
import './wizard.scss';

// 2
@Component({
  // some component stuff...
  styles: [require('./wizard.scss')],
})

but in both cases webpack complains: Cannot find module wizard.scss. I suppose I have to export the SCSS file from my npm package somehow to my app, but how?

Edit:

I tried a little more digging into it.

After adding:

styleUrls: ['wizard.scss'],

to my component I get following error in console. 

../ng2-wizard/src/wizard/wizard.scss
Module parse failed: <my-project-dir>/ng2-wizard/src/wizard/wizard.scss Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:15)

So I guess the question is now: How do I tell webpack to compile all scss files in my module?

Ok. From previous error (note the ../ng2-wizard) I figured the problem was that I used npm link to develop my npm-packaged component so my webpack loaders configuration didn't match the correct path.

Upvotes: 1

Views: 5545

Answers (1)

Ambroos
Ambroos

Reputation: 3476

The easiest way to do this is to just require your SCSS file directly in your app. If it's packaged with the ng2-wizard module, simply do the following in your code:

import 'ng2-wizard/wizard.scss';

That's it! Webpack will pick it up and add it to your bundle. You don't have to reference wizard.scss anywhere in the code of your ng2-wizard module.

Upvotes: 1

Related Questions