Assets

[JustinRvt]

Hello, I'm still having fun with your boilerplate but I'm stuck at some point : I tried to add bower_components, redirecting them to /vendor but it doesn't seem to have any effect at all. Same when I add styles to app.component.scss (it works if I'm adding styles directly in components though). Could you give me a hint so I could continue to learn more about your work?

Thank you!!

[jaesung2061]

Are you talking about the Webpack configuration for Bower? I haven't configured it to work with Bower, since NPM is preferred over Bower.

Try adding this line to ./webpack/common.config.js to use with Bower.

resolve: {
    // ...
    modulesDirectories: ["node_modules", "bower_components"]
},

About the styles, I think it might be an encapsulation issue with Angular 2. I'll take a look into it when I can (at work right now). Also, are you trying to style child components in app.component.scss?

[JustinRvt]

Thanks for your quick answer! (Don't worry about this working delay, if your picture is accurate, we might have done the same job)

About styles, it's weird because some parents components get into styles.bundle.js, some other don't. Like my footer's style for instance O.O

.slides-navigation a {
    display: block;
    text-decoration: none;
    color: #0f0f0f; // ..
}

is ok but

.bg-footer {
    position: relative;
    background-image: url('../img/bg_footer.jpg'); // ...
}

is not, both of them don't have child.

For Webpack, as a designer/front, I used to use Bower a lot, but even with NPM (and your piece of code) it doesn't appear to get into vendor.bundle.js But I don't know Webpack at all and I think I'll have to dive into it prettty much quickly.

[jaesung2061]

It may have to do with the image URL. Webpack may be looking to load that file relative to the source file footer.component.scss. To fix it you need to move the image with the source file and add a new file loader to the webpack configuration.

Check out https://webpack.github.io/docs/stylesheets.html. Webpack may seem confusing at first but it's a very powerful bundler (it'll be worth learning).

[jaesung2061]

Have you found a solution to this issue? It could be a CSS specificity issue.