-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Loading scss files instead of using inline style #9
Comments
This is something I have long been meaning to look into. I still have not figured out the webpack config but you can do it in your component file. I am using create react app so I made sure to install node-sass. You will also need the webpack raw-loader package. Then you can say Create react app will complain about this so you have to add |
how to load the css file using the |
@noskcire11 Just put the |
in production build using create react app will separate the css files from the html. any idea how to do that in the shadow root? |
This is what I use: https://github.com/pixiebrix/pixiebrix-extension/blob/c1b475f51de089a3d8734793e892463283ba251b/src/components/quickBar/QuickBarApp.tsx import faStyleSheet from "@fortawesome/fontawesome-svg-core/styles.css?loadAsUrl";
<ReactShadowRoot mode="closed">
<link rel="stylesheet" href={faStyleSheet} />
</ReactShadowRoot> And this is the webpack configuration to enable that module.exports = {
module: {
rules: [
{
resourceQuery: /loadAsUrl/,
type: "asset/resource",
generator: {
filename: "css/[name][ext]" // The file will be generated here
}
}
]
}
} |
One problem I have though is FOUC, because the shadow-dom content is appended together with the stylesheet so it renders before the sheet is parsed. I documented it here, but I don't have a solution for it yet, help welcome: Edit: Found a solution! https://github.com/pixiebrix/pixiebrix-extension/blob/9271edae68c69bb2a6539a7f8add15fb4947b4f0/src/components/quickBar/QuickBarApp.tsx#L288-L289 |
for anyone using cra: import url from "!!file-loader?name=static/css/[contenthash].css!sass-loader!./style.scss"
<ReactShadowRoot>
<link rel="stylesheet" href={url} />
</ReactShadowRoot> |
I also need it |
Is it possible to load css/scss files in the shadow root? Which configuration is needed in webpack?
The text was updated successfully, but these errors were encountered: