Define css files within webpack.config.js

Question

I am building something like a static website generator that uses webpack to build the project and create a bundle with it.

In this project, a user is able to specify custom css files. I want those css files to be bundled with the final result. The issue is, that I do not have the paths to those css files available during development, so I can't do import 'some-asset-file-provided-by-the-user.css' in the javascript code that is going to be bundled. But I have them available when calling webpack.compile(config).

I am looking for a way to inject those css files into the bundle. So far I tried various ways, such as:

const stylesheet = 'some-asset-file-provided-by-the-user.css'
require(stylesheet)

Which did not work, probably because webpack is not able to deal with this "dynamic" require. Then I used the webpack define plugin for this

/* webpack.config.js */
new webpack.DefinePlugin({
  stylesheet: 'some-asset-file-provided-by-the-user.css'
}),

/* app.js */
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css'

which also did not work. I also tried to find a way to do something like this:

{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(Object.assign({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          useFiles: ['file-a.css', 'file-b.css']
        }
      }
    ]
  }, extractTextPluginOptions))
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

which also failed because apparently neither style-loader nor css-loader support this type of interaction.

How can I solve this? I am open to writing a plugin for this, but I'd rather use something existing.

Michael Jungo · Accepted Answer · 2017-04-22 11:14:53Z

2

The simplest way to include the CSS is by adding it to your entry point. To make this easier, you should use an array as entry point even if it's just a single file, so you can simply push the CSS.

For example:

entry: {
  app: ['./src/index.js'],
  // Other entries
},

In your compile script you add it to entry.app before passing it to webpack.

config.entry.app.push('./user.css');
const compiler = webpack(config);

answered Apr 22, 2017 at 11:14

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Define css files within webpack.config.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related