0

I'm having some trouble placing stylesheet tags in the correct place with extract-text-webpack-plugin and Webpack 3.

My project uses third-party stylesheets pulled from a CDN, as well as a local stylesheet bundle. I would like the third-party styles to override my local bundle, but the extract text plugin places the local style tag last. This is a problem because the local bundle contains resets that break the third-party components.

My index.html template looks like this (paraphrasing):

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="www.mycdn.com/third_party.css">
  </head>
  ...

This is the resulting markup:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="www.mycdn.com/third_party.css">
    <link rel="stylesheet" type="text/css" href="local.css"> <!-- should be above third_party.css -->
  </head>
  ...

I searched the docs for extract-text-webpack-plugin and html-webpack-plugin, but got nothing. Does anyone know how I can override my local styles with the third-party styles?

For some more background, my CSS config looks like this:

    module: {
        rules: [
            ...
            {
                test: /\.s?css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader?sourceMap',
                        'resolve-url-loader',
                        'postcss-loader?sourceMap',
                        'sass-loader?sourceMap',
                    ],
                }),
            },
        ]
    }

I'm also using HtmlWebpackPlugin:

    plugins: [
        ...
        new ExtractTextPlugin('local.css'),
        new HtmlWebpackPlugin({
            template: '../webpack/template.html',
        }),
    ],
bbalan
  • 604
  • 2
  • 7
  • 19
  • Overriding local styles with a third party's is the opposite what you'd normally do: why do you want to do this? – 1252748 Oct 30 '17 at 14:22
  • @1252748 I was forced to use two different clients' CSS packages in the same project. Both used very generic class names and conflicted with each other. It would have been too much effort to rewrite either package, so I figured a good solution would be to import them in such a way that one overrides the other. Them problem is solved now, but it is a little disappointing to learn I can't set the order of style tags in Webpack. – bbalan Oct 30 '17 at 14:34

0 Answers0