在create-react app中使用具有react框架组件的scss
我们有一个创建反应应用程序，它使用react-frame-component呈现页面的一部分，完全独立于页面的其余部分。
我们一直在使用框架内的css文件将样式应用于组件。这可以通过向框架组件提供带有css文件的-tags的initialContent-属性来实现，如下所示(取自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的路径，然后我们可以将其作为字符串提供给框架组件(就像我们已经对css-文件所做的那样)。
我们已经在使用craco覆盖一些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'回答 1
Stack Overflow用户
发布于 2021-06-23 09:08:48
为了加载scss文件，您需要style-loader、css-loader、sass-loader。下面的规则对我来说非常有效。你可以试试。
{
test: /\.(css|scss)$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" },
],
},https://stackoverflow.com/questions/68087042
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号