index.styl suppose under root? about bootstrap-stylus

[hiulit]

I think so too.
And that goes for the mixins as well.

I think the best option would be to remove "bootstrap" from the path, for both the index.styl and the mixins.styl

Don't you think?

Probably the #126 (comment) will help?

[uglow]

For Webpack 2 users, this is a deal-breaker for using Bootstrap-stylus.

Webpack 2 config (webpack 2.1.0-beta.21)

{
  test:/\.(styl)/,
  loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader!stylus-loader?paths=node_modules/bootstrap-styl'})
}
// Note that the above worked in Webpack 1
--------------  Output ---------
ERROR in ./src/modules/app/styles/App.styl
Module build failed: ModuleBuildError: Module build failed: Error: /mydev/code/odecee/starters/react-starter/node_modules/bootstrap-styl/bootstrap/index.styl:8:9
    4|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
    5|  */
    6| 
    7| // Core variables and mixins
    8| @import "bootstrap/variables"
--------------^
    9| @import "bootstrap/mixins"
   10| 
   11| // Reset and dependencies

failed to locate @import file bootstrap/variables.styl

So you can see that the loader is finding bootstrap-styl/bootstrap/index.styl, but the references inside this file are not resolvable by Stylus.

If I edit my local copy of index.styl to:

/*!!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "./variables"          // <---- Relative path!
@import "bootstrap/mixins"

... then this is the output:

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./src/modules/app/styles/App.styl
    Module build failed: Error: /mydev/code/odecee/starters/react-starter/node_modules/bootstrap-styl/bootstrap/index.styl:9:9
        5|  */
        6| 
        7| // Core variables and mixins
        8| @import "./variables"
        9| @import "bootstrap/mixins"
    --------------^
       10| 
       11| // Reset and dependencies
       12| @import "bootstrap/normalize"

... which means that the relative path is being resolved.

From looking at the issues here, it seems like few of the maintainers are actually using Bootstrap-stylus with stylus-loader. The main reason I'm using Stylus is because of Bootstrap.

My workaround for now is to locally duplicate index.styl and mixins.styl, change the paths to '~bootstrap-styl/bootstrap/...', and everything works as expected.

If you are interested in a PR, let me know. I expect this would involve creating index-webpack.styl and mixins-webpack.styl files with the correct relative paths.

[kane-c]

You can use Bootstrap Stylus with webpack 2 (tested with [email protected]) with the following:

package.json dependencies

{
    "bootstrap-styl": "^5.0.8",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1",
    "webpack": "^2.1.0-beta.25"
}

In your JS file:

import './my-styles.styl';

// ... your code here

my-styles.styl

@import 'bootstrap';

// ... your styles here

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './index.js',
  ],
  module: {
    rules: [
      {
        test: /\.(?:eot|otf|svg|ttf|woff2?)$/,
        loader: 'file?name=[name].[ext]',
      },
      {
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          // `resolve url` is required to import the glyphicon font files
          loader: 'css!stylus?paths=node_modules/bootstrap-styl&resolve url',
        }),
        // To inject the CSS into the header, comment out the loader above and `plugins`
        // below and uncomment this loader:
        // loader: 'style!css!stylus?paths=node_modules/bootstrap-styl&resolve url',
      },
    ],
  },
  output: {
    filename: 'output.js',
  },
  plugins: [
    new ExtractTextPlugin('[name].css'),
  ],
};

And in your HTML head:

<script src="output.js"></script>
<link href="main.css" rel="stylesheet" />

[uglow]

Thanks @kane-c ! I'm not quite ready to upgrade to the latest Webpack beta (I'm using beta.21) at the moment due to the changes around loader option config. But your example gives me hope 👍

If my webpack.config.js file was in config/webpack/, would that affect the ?paths= value that I need to use?

[kane-c]

Glad it helped! It shouldn't be too hard to adapt the webpack config above for the older style.

Off the top of my head - module.rules -> module.loaders and I believe ExtractTextPlugin.extract has a different format for the arguments.

[jpcmf]

I don't know what's wrong with my config. I'm trying to create/add the css file inside my html but I'm getting a error in my console when run build-dev. Any help? Thank you.

webpack.config.js

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

let plugins = [];

plugins.push(new htmlWebpackPlugin({
  hash: true,
  minify: {
    html5: true,
    collapseWhitespace: true,
    removeComments: true
  },
  filename: 'index.html',
  template: __dirname + '/main.html'
}));

plugins.push(new extractTextPlugin('style.css'));

plugins.push(new webpack.ProvidePlugin({
  '$': 'jquery/dist/jquery.js',
  'jQuery': 'jquery/dist/jquery.js'
}));

plugins.push(new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  filename: 'vendor.bundle.js'
}));

if(process.env.NODE_ENV == 'production') {
  plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
  plugins.push(new babiliPlugin());

  plugins.push(new optimizeCSSAssetsPlugin({
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {
      discardComments: {
        removeAll: true
      }
    },
    canPrint: true
  }));
}

module.exports = {
  entry: {
    app: './src/js/app.js',
    vendor: ['jquery', 'bootstrap']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // publicPath: 'dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.styl$/,
        loader: extractTextPlugin.extract({
          fallbackLoader: 'style',
          // loader: 'css!stylus?paths=node_modules/bootstrap-styl&resolve url'
        }),
        loader: 'style!css!stylus?paths=node_modules/bootstrap-styl&resolve url'
      },
      {
        test: /\.scss$/,
        use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins
}

main.styl

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

$body-bg ?=               red

body
  background-color $body-bg

package.json

{
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babili-webpack-plugin": "^0.1.1",
    "bootstrap-styl": "^5.0.7",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^2.29.0",
    "node-sass": "^4.5.3",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "time-require": "^0.1.2",
    "url-loader": "^1.0.1",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.11.0"
  }

[jpcmf]

Any help? @kane-c

[kane-c]

What is the error in your console?

[jpcmf]

➜  My-Webpack-Bootstrap-Template git:(master) ✗ npm run server

> [email protected] server /Users/joaopaulo/Sites/My-Webpack-Bootstrap-Template
> webpack-dev-server --open

/Users/joaopaulo/Sites/My-Webpack-Bootstrap-Template/node_modules/schema-utils/dist/validateOptions.js:40
    throw new _ValidationError2.default(ajv.errors, name);
    ^

false
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] server: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joaopaulo/.npm/_logs/2018-05-02T23_44_21_748Z-debug.log

[kane-c]

This error relates to the schema validation - likely comes from the webpack options for extract-text-webpack-plugin - double check your configs are correct for the versions of that and webpack you are using, in particular loader or loaders vs. use

[jpcmf]

Ok, thank you. I'm using Webpack 3, maybe it's the problem.

[kane-c]

I had a similar error recently, you might have better luck adding some extra logging around node_modules/schema-utils/dist/validateOptions.js:40 or using a debugger - the exception doesn't really give you much info.

[jpcmf]

Indeed :/