Извлечение и ссылка на несколько файлов CSS в извлеченном приложении create-реагировать

Question

У меня есть созданное приложение create-реагировать (версия 3.8.1 веб-пакета), которое будет реализовано в качестве стороннего виджета на других веб-сайтах.Компоненты отображаются в нескольких iframe с использованием r eact-frame-component .

При стилизации компонентов внутри iframe я включаю css в начало iframe.Прямо сейчас я делаю это, загружая CSS в строку, подобную этой:

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

Однако, чтобы минимизировать размер пакета и отложить загрузку CSS, я хотел бы извлечь CSS в отдельные файлы и ссылкудля них в iframe, как это:

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

Я знаю, что мне, вероятно, нужно использовать extract-text-webpack-plugin для извлечения различных внутренних стилей, но не могуправильная настройка веб-пакета.

Как будет выглядеть настройка веб-пакета для этого вида?Как мне связать извлеченные css-пакеты с хешами содержимого в заголовке компонентов iframe?

Answer 1

Если вы обновитесь до Webpack 4, вы можете сделать это без особых дополнительных настроек с помощью mini-css-extract-plugin .

В веб-пакете 3 эта конфигурация понадобится вам в файле конфигурации вашего веб-пакета

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

Мы не можем сказать много, не посмотрев на ваш конфиг веб-пакета. но более или менее, что-то в этом роде должно дать вам желаемую функциональность.