bootstrap-stylus Stylus bootstrap loaded but not compiled with Webpack

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 ?

May 10 '16 12:05 oric01

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'

May 10 '16 23:05 kane-c

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...

May 11 '16 09:05 oric01

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

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

May 11 '16 11:05 kane-c

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 !

May 11 '16 15:05 oric01

No worries. Good luck!

May 11 '16 23:05 kane-c

same problem,

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

Jul 20 '16 12:07 priyankaselvamclara

@kane-c Did your source map generate correctly?

https://github.com/shama/stylus-loader/issues/156

Dec 12 '16 13:12 JounQin

any luck on this?

Jan 13 '17 12:01 thedanheller

any luck on this +1?

Jan 19 '17 21:01 reduxdj

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.

Jan 19 '17 22:01 maxmx

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]'
    }

Jan 19 '17 22:01 thedanheller

I put together my webpack sample and configured it for source maps.

They nearly worked, but I ran into this bug with stylus-loader where the browser knows the Stylus file and line but trying to view it just shows a file with null as the contents.

Has anyone been able to get source maps working properly?

Jan 20 '17 00:01 kane-c

@kane-c adding the query parameter as you suggested worked for me, hope to anyone works to, here's my webpack.config.js

module: {
    // rules for modules (configure loaders, parser options, etc.)
    rules: [
      {
        test: /\.html$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.js?$/,
        exclude: [/node_modules/],
        use: ['ng-annotate-loader', 'babel-loader']
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.styl$/,
        exclude: [/node_modules/],
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader?paths=node_modules/bootstrap-styl'
        ]
      },
      {
        test: /\.(svg|woff|woff2|ttf|eot|ico)$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'file-loader?name=src/assets/css/fonts/[name].[hash].[ext]'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'file-loader?name=src/assets/img/[name].[ext]'
          }
        ]
      }
    ]
  }