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?

https://github.com/shama/stylus-loader/issues/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]'
    }

[kane-c]

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?

[aneurysmjs]

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

[lightbringer1991]

I have submitted a PR for this, tested and working on my webpack configuration.

[jpcmf]

Can you share the solution @lightbringer1991 ?

[lightbringer1991]

@jpcmf it's in the linked PR to this issue https://github.com/maxmx/bootstrap-stylus/pull/132

[yoyoys]

When will #132, #133 be merged? nice done.

[crs1138]

Is there a solution that works with Webpack 4?