Nativescript webpack version don't load platform css


#1

Hi!
I make my nativescript project to webpack version ready.
npm install --save-dev nativescript-dev-webpack
npm install

My project folder has
_app_common.scss
app.android.scss
app.ios.scss
app.css (is empty)

app.android.scss content
@import ‘app_common.scss’;
@import ‘~nativescript-theme-core/scss/platforms/index.android’;

app.ios.scss content
@import ‘app_common.scss’;
@import ‘~nativescript-theme-core/scss/platforms/index.ios’;

If tns run android then fine but if webpack version npm run start-android-bundle then wrong
app common css is not loaded

Please help me what is the wrong in my code or logic.
It is bug?
Thanx


#2

You need to modify your webpack.config.js
The default doesn’t load platform specific app.css

You can see an example here:
https://github.com/m-abs/nativescript-accessibility-ext/blob/master/demo/webpack.config.js

You should also delete the empty app.css


#3

Lot of thanx :slight_smile:Worked for me.


#4

Sorry, I can see this is marked as resolved but possibly it’s not so clear for everybody how to achieve that.
I made a pull request with something that fixed for me -> Support for platform specific mainSheet

Just replicate that in you respective webpack.config.js (js, ts or angular)

For those who still have problems due to be working with sass (or less), please get the css resultant files created first running via tns then try again.


#5

I’m also having this issue with. @m_abs You webpack.config.js file is leading to a 404 page.

What is the solution for this? My platform.ios.css or platform.android.css don’t load when building with webpack.


#6

Hey,
The project have been moved and restructured. new link:


#7

Is there a solution to this? I just installed N-webpack but my project doesn’t build because of this line in my ‘app.css’:

@import 'nativescript-theme-core/css/core.light.css';

Building without webpack is fine. What do I need to do to solve this?

Thanks.


#8

Did you follow the migration guide?

You must include ~ in front of path when it is imported from node modules.


#9

@manojdcoder Thanks, that’s what it was. I was missing the tilde!
My project compiles now but still doesn’t work though, the app is just a white, blank screen so I will have to do some more digging…