1

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

我们一直在框架内使用 css 文件将样式应用于组件。这可以通过向 Frame-component 提供带有 css 文件的 -tags 的 initialContent-property 来完成，如下所示（取自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-component（就像我们已经使用 css-files 所做的那样） .

我们已经在使用 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'
4

1 回答 1

0

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

{
    test: /\.(css|scss)$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" },
      { loader: "sass-loader" },
    ],
  },
于 2021-06-23T09:08:48.910 回答