Extracting and referencing multiple CSS files in ejected create-react-app

Question

I have an ejected create-react-app (webpack version 3.8.1) that will be implemented as a third-party widget on other websites. The components are rendered in multiple iframes using react-frame-component.

When styling the components inside iframes I include the css in the head of the iframe. Right now I'm doing it by loading the css into a string like this:

// IframeComponentOne.js
const innerStyles = require("./iframe-component-one-styles.scss").toString();

render() {
  return (
    <Frame
        head={<style>{innerStyles}</style>}
      >
      <CompA />
      <CompB />
      ...
    </Frame>
  )
}

// IframeComponentTwo.js
const innerStyles = require("./iframe-component-two-styles.scss").toString();

render () {
  return (
    <Frame
        head={<style>{innerStyles}</style>}
      >
      <CompC />
      <CompD />
      ...
    </Frame>
  )
}

However, to minimize bundle size, and defer css loading, I would like to extract the css into separate files and link to them in the iframes like this:

render() {
  return (
    <Frame
      head={<link rel="stylesheet" href="specific-frame.[hash].css">}
    >
    <CompX />
    <CompY />
    ...
  )
</Frame>

I'm aware that I probably need to use extract-text-webpack-plugin to extract the different innerStyles, but can't the webpack setup right.

How would a webpack setup for this look? How do I reference the extraced css bundles with content hashes in the head of the iframe components?

Dinesh Pandiyan · Accepted Answer · 2019-01-29 06:51:14Z

1

If you upgrade to Webpack 4, you can do this without much additional configuration with mini-css-extract-plugin.

With webpack 3, you will need this configuration in your webpack config file

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
}

We cannot say much without looking at your webpack config. but more or less, something along these lines should get you your desired functionality.

edited Jan 29, 2019 at 6:51

answered Nov 20, 2018 at 14:45

Dinesh Pandiyan

6,3293 gold badges36 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Extracting and referencing multiple CSS files in ejected create-react-app

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