3. Cannot use relative paths in Stylus styles with Monaca Preview

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Cannot use relative paths in Stylus styles with Monaca Preview

  • M

    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 src/styles.styl. In main.jsx, I refer to this style so that Webpack picks it up, require('./styles.styl')

    In my app, I need to use local image resources. For example, I have an element that uses this background-image style:

    background-image: url("/assets/stockphoto.jpg")

    This file is located at src/public/assets/stockphoto.jpg

    With this setup, the file is picked up by the Stylus transpiler and it can be loaded by the monaca preview webserver. Note that this is an absolute path, it is relative to /. The files in the public directory have ended up in the root of www for 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:

    background-image: url("/var/containers/Bundle/Application/07942f34-4a35-48ba-81c7-e599aaa73653/TheApp.app/www/assets/stockphoto.jpg")

    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:

    background-image: url("assets/stockphoto.jpg")

    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 www in Stylus styles? I’m using the default Webpack config.

    0