CODEWITHSUNDEEP
webpackextract-text-pluginextracttextwebpackplugin
bbalan
bbalan

Reputation: 691

Webpack extract text plugin - choosing position of stylesheet tag

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

Upvotes: 0

Views: 66

Answers (0)

Related Questions