Require css on server side not working

[crebuh]

• I'm submitting a ...
• [ x] support request
• What modules are related to this Issue?
• [x ] express-engine
• [x ] universal
• What is the current behavior?

In my main.browser.ts I'm requiring an external css file with:

 require('!style!css!../../libs/wp-frontend-libs/start-ui/build/css/separate/partials/base.css');

It works fine in the styles are inlined. When I want to include the css already in the server rendering process (require in main.node.ts or globally in my app.ts), the build process crashes with the message:

 Cannot find module '!style!css!../../libs/wp-frontend-libs/start-ui/build/css/separate/partials/base.css

Any hints on that? Do I have to use another loader in the server environment?

• Please tell us about your environment:
• Angular version: 2.0.0
• OS: [all Linux ]
• Platform: [NodeJs ]

[jeffbcross]

I'm no Webpack expert, but it seems like Universal is getting files before they've been Webpacked. @gdi2290 can probably give pointers, but for the sake of issue cleanup I'm going to close this issue as out-of-scope.

[manuelmazzuola]

Any updates? @gdi2290 @jeffbcross I'm not able to use style-loader and css-loader

[MarkPieszak]

So on the server, you only want the raw css.
For this reason you don't need to use, style-loader anymore.

        // CSS files
        { test: /\.css/, loader: 'raw-loader' },

Now a simple require() will work without any problems.

 styles: [require('./app.component.css')],

@manuelmazzuola @crebuh

[rijusudar]

@MarkPieszak what if I want to be bundled with in bundle.js file like what we do in webpack.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}