CODEWITHSUNDEEP
javascriptcsswebpack
Mamut
Mamut

Reputation: 1050

Webpack and external (vendor) .css

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

Upvotes: 2

Views: 2943

Answers (2)

doup
doup

Reputation: 911

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

module.exports = {
  entry: {
    name: [
      './test.js',
      './test.css',
    ],
  },
  /* … */
};

Upvotes: 0

thitemple
thitemple

Reputation: 6059

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');

Upvotes: 2

Related Questions