Question

我有一个弹出的create-react-app（Webpack版本3.8.1），它将在其他网站上作为第三方窗口小部件实现。组件使用r eact-frame-component在多个iframe中呈现。

在对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来提取不同的innerStyles，但不能正确设置Webpack。

此外观的webpack设置如何？如何在iframe组件的开头引用带有内容散列的多余CSS捆绑包？

Answer 1

如果您升级到Webpack 4，则可以使用mini-css-extract-plugin进行此操作而无需进行过多配置。

对于webpack 3，您将需要在webpack配置文件中进行此配置

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

如果不查看您的Webpack配置，我们就不能说太多。但是或多或少，遵循这些原则，应该可以为您提供所需的功能。

在弹出的create-react-app中提取和引用多个CSS文件

1 个答案: