在 create-react-app 中使用带有 react-frame-component 的 scss

如何解决在 create-react-app 中使用带有 react-frame-component 的 scss

我们有一个 create-react-app，它使用 react-frame-component 来渲染页面的一部分，完全独立于页面的其余部分。

我们一直在框架内使用 css 文件来将样式应用到组件。这可以通过将css文件的带有-tags的initialContent-property提供给Frame-component来完成，就像这样（取自https://github.com/ryanseddon/react-frame-component/issues/74#issuecomment-347710246）

import Frame from 'react-frame-component'
import styles from 'public/css/styles.iframe.css'

const initialContent = () => {
  return (
    `<!DOCTYPE html>
    <html>
      <head>
        <link href="${styles}" rel="stylesheet" />
      </head>
      <body>
        <div id="page" class="page"></div>
      </body>
    </html>`
  )
}

<Frame initialContent={initialContent()}>
  <FrameContent />
</Frame>

现在我们也希望能够使用 scss 文件。

问题是在应用程序中导入 scss 文件时，它们将应用于父框架而不是内部框架（当然），无论您在哪个组件中导入它们。

所以我们需要一种方法来触发 scss 文件的编译并获取返回的编译 css 的路径，然后我们可以将其作为字符串提供给 Frame 组件（就像我们使用 css-文件已经）。

我们已经在使用 craco 来覆盖一些 cra-config。

所以我考虑为某些后缀的 scss 文件应用一个 scss 编译器和一个文件加载器。

这是我的 craco.config.js：

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.(s*).theme.scss$/,use: [
              "file-loader","sass-loader"
            ]
          }
        ]
      }
    }
  }
};

文件在

css/style.theme.scss

它是这样包含的：

const testScss = require("./css/style.theme.scss");

但我一直在接受

Module not found: Can't resolve './css/style.theme.scss' in '.../.../dist'

解决方法

为了加载 scss 文件，您需要 style-loader、css-loader、sass-loader。遵循规则对我来说非常有效。你可以试试看。

{
    test: /\.(css|scss)$/,use: [
      { loader: "style-loader" },{ loader: "css-loader" },{ loader: "sass-loader" },],},