Importing raw css content to angular component

[unlight]

Given:

// main.ts
import './app.css';
// app.component.ts
@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')],
})
export class AppComponent {
    name = 'Angular';
}

To achieve my goal, need to satisfy following conditions:
1. global css file app.css with common stuff
2. css component files which will be embedded to component class styles: [require('./app.component.css')],
3. css component files must be stored near app.component.ts (e.g. app.component.css)

1. Brute solution

CSSPlugin({ write: true }),

• Condition 2 is not satisfied
• Hot reload for css doesn't work

CSSPlugin({ write: false }),

• Condition 1 is not satisfied
• require('./app.component.css') is not returns raw content

2. Chain solution

[
    /\.component\.css$/,
    RawPlugin({}),
],
[
    /\.css$/,
    CSSPlugin({ write: true }),
],

• Hot reload for css doesn't work
• When I changing app.component.css I see in console Source changed for app.css (which is not true)

[nchanged]

Ok for the hot reload can you remove write:true completely, and tell me what's the issue that you are having.
2) If you want to have raw CSS data use RawPlugin but not the CSS plugin

[unlight]

Let me clarify, I have requirements point 1-3 (see above), how to solve it?
I have solutions:

1. Brute solution
2. Chain solution

Which have restrictions.

[unlight]

So what I am thinking about.

1. Hot reload for Raw Plugin
2. Api (server) for explicitly call client's refresh (hot and full)

[nchanged]

Coming soon, swamped with work

[nchanged]

in 1.3.71 you can use a custom emitter

fuseBox.devServer(">index.ts", {
    port: 8083,
    emitter: (self, fileInfo) => {
        self.socketServer.send("source-changed", fileInfo);
    }
});

fileInfo looks like:

{ type: "js",  content: file.contents, path: file.info.fuseBoxPath }

Documentation comes later.
I am closing it right now, and splitting it into separate issues.

[unlight]

After playing with new version, I came to a conclusion the best way is both features (Hot reload in Raw Plugin and Custom emitter) must be used together.

[unlight]

Maybe I will create pull request...

[nchanged]

Go ahead man! I am down for improvements

[devmondo]

this is just beautiful!!!