Stylus bootstrap loaded but not compiled

[oric01]

Hi,
I come here after having published a bug request on bootstrap-stylus : Stylus bootstrap loaded but not compiled with Webpack.
I've got some support from a bootstrap-stylus contributor then checked some issue on stylus-loader ( #12, #102) and tried some hint but with no result.

To resume : On Chrome inspector, I can see that bootstrap files are loaded but they are not parsed.

//Copied from my bootstrap-stylus issue

    "bootstrap-styl": "^5.0.5",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.0.0",
    "webpack": "^1.9.5",

Im trying to use bootstrap-stylus in a Webpack context.
As far as I understand, bootstrap-stylus is a Stylus plugin so i used this config in order to parse bootstrap stylus files :

//webpack.config.js
module.exports = {
    ...
    module : {
        loaders: [
           { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
           { test: /\.css$/, loader: 'style!css' },
        ]
    }
    stylus: {
        use: [bootstrap()],
    },
}

//navbar.styl
@import 'bootstrap/buttons'

.navbar
    height 6.5rem

//navbar.html
<div class="navbar">
    <span class="btn btn-primary"></span>
</div>

When I run my serve and inspect, I see that btn is loaded but not compiled (and off course btn-primary is not generated)

I didnt found any other way to configure it with Webpack.

Any idea ?

[kenaniah]

It's a bit of a hack, but try adding this to your navbar.styl file:

@import "~bootstrap/dist/css/bootstrap.min.css"

I'm not sure what the path for the bootstrap buttons CSS file is, but you can find it by inspecting the relevant node module in node_modules assuming that's how you've installed it.