Stylus bootstrap loaded but not compiled with Webpack

[oric01]

Hi,

    "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 ?

[kane-c]

I haven't tried it with Webpack yet but try adding the Bootstrap directory to your Stylus path instead of using it as a plugin:

module.exports = {
    ...
    module : {
        loaders: [
           { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
           { test: /\.css$/, loader: 'style!css' },
        ]
    }
    stylus: {
        paths: ['node_modules/bootstrap-styl'],
    },
}

Then you can just import in your Stylus files as normal: @import 'bootstrap/buttons'

[oric01]

Look like it doesnt care about paths option

ERROR` in ./~/css-loader!./~/stylus-loader!./client/app/common/navbar/navbar.styl
Module build failed: Error: c:\projet\NG6-starter-master\client\app\common\navbar\navbar.styl:2:9
   1| @import '../common'
   2| @import 'bootstrap/buttons'
--------------^
   3| 
   4| .navbar
   5|   height $navbarHeight

failed to locate @import file bootstrap/buttons.styl

Until now only the use resolve the bootstrap path correctly, but doesnt parse it.

I'm still in a heavy lurning step on Webpack, so I feel that it's about telling the loader to get Bootstrap files into the render step, but I dont know how...

[kane-c]

Looking at the docs for stylus-loader, this should do it:

{ test: /\.styl$/, loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-styl' }

[oric01]

Yes I tried this, but it has the same effect than the use option.
I will ask stylus-loader some support and will let you know if I have some news about it.
Thx @kane-c for your current support !

[kane-c]

No worries. Good luck!

[priyankaselvamclara]

same problem,

ERROR in .//css-loader!.//stylus-loader!.
need help

[JounQin]

@kane-c Did your source map generate correctly?

webpack/stylus-loader#156

[thedanheller]

any luck on this?

[reduxdj]

any luck on this +1?

[maxmx]

We'll accept a PR if someone wants to take this on and it requires a fix in the bootstrap-stylus repo.

The new company I work for is using another framework so I haven't been able to test this against modern build tools.

[thedanheller]

I managed to make it work with a small workaround:

https://github.com/daniloprates/thin-starter

main.styl

$icon-font-path = "~bootstrap-styl/fonts/"
@import 'bootstrap';

webpack.config.js

var bootstrap = require('bootstrap-styl');

module.exports = {
  entry: {
    a: './src/scripts/main.js',
    b: './src/style/main.styl'
  },
(...)
  stylus: { use: [bootstrap()] },
(...)
};

loaders

    {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file?name=node_modules/bootstrap-styl/fonts/[name].[ext]'
    }