Cannot use relative paths in Stylus styles with Monaca Preview
Using the Monaca CLI, I created a ReactJS project. It comes with a webpack config that transpiles Stylish styles.
I added a file for styles at
main.jsx, I refer to this style so that Webpack picks it up,
In my app, I need to use local image resources. For example, I have an element that uses this background-image style:
This file is located at
With this setup, the file is picked up by the Stylus transpiler and it can be loaded by the
monaca previewwebserver. Note that this is an absolute path, it is relative to
/. The files in the
publicdirectory have ended up in the root of
wwwfor the final Cordova app.
However, when I compile the app for iOS, the background image does not appear. I had a feeling that this had something to do with the absolute path, so I attached to the app using Safari developer tools on my Mac.
Sure enough, the absolute path needed by the final Cordova app had to be the following:
I figured this out by looking at the other assets in Safari dev tools. If I manually set the style to this value, then the background image appears. The transpiled css file is located at
/var/containers/Bundle/Application/07942f34-4a35-48ba-81c7-e599aaa73653/TheApp.app/www/so, a correct relative path would also be:
Using this path also happens to work. However, if I use this style with
monaca transpile, the Stylus compiler cannot find this file at the relative path:
ERROR in /Users/z/.cordova/~/css-loader!/Users/z/.cordova/~/postcss-loader!/Users/z/.cordova/~/stylus-loader!./src/styles.styl Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/stockphoto.jpg in /Users/z/src/theapp/monaca/theapp/src @ /Users/z/.cordova/~/css-loader!/Users/z/.cordova/~/postcss-loader!/Users/z/.cordova/~/stylus-loader!./src/styles.styl 6:791-825 Project has failed to transpile. Error has occured while transpiling /Users/z/src/theapp/monaca/theapp with webpack. Please check the logs.
How can I refer to files relative to
wwwin Stylus styles? I’m using the default Webpack config.