Twitter Bootstrap Question posted in

Webpack and external (vendor) .css – Twitter bootstrap

I’m slowly bringing Webpack into an existing project. At this point we won’t require .css files. However, I would like Webpack to still process them.

I would like Webpack to just load the file, pass it to whatever .css loader is required (Stylus in our case), and output a .css file.

None of the combinations of ExtractTextPlugin, raw and file loaders, passing loaders into other loaders work, Webpack inevitably throws

Module build failed: ParseError: ...bootstrap-theme.min.css:5:1996
   1| /*!
   2|  * Bootstrap v3.3.5 (http://getbootstrap.com)
   3|  * Copyright 2011-2015 Twitter, Inc.
...
expected "indent", got ";"

Is it even possible to process external files with Webpack like this?

Various combinations tried:

  {
    test:   /.(styl|css)/,
    loader: 'raw!stylus'
  }

  {
    test:   /.(styl|css)/,
    loader: 'file!stylus'
  }


  {
    test:   /.(styl|css)/,
    loader: ExtractTextPlugin.extract('file', 'raw!stylus')
  }


  {
    test:   /.(styl|css)/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
  }
Tags:

2

Answers


  1. 0

    You don’t need to pass your css files through the stylus loader, only the .styl files.

    I’ve managed to make it work with this configuration:

    module.exports = {
  entry: {
    name: './test.js'
  },
  output: {
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.css$/,
        loaders: ['style', 'css']
      },
      {
        test: /.styl$/,
        loaders: ['style', 'css', 'stylus']
      },
      {
        test:/.(woff2?|eot|ttf|svg)$/,
        loader: 'url'
      }
    ]
  }
}

    And then you can import/require your css files as such:

    require('./test.css');
require('./node_modules/bootstrap/dist/css/bootstrap.min.css');
    Login or Signup to reply.
  2. 0

    You could also add your CSS as an extra entry point of name:

    module.exports = {
  entry: {
    name: [
      './test.js',
      './test.css',
    ],
  },
  /* … */
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search