使用object标签引用SVG时CSS样式不生效的问题求助

Let’s walk through the most likely issues and fixes for your problem, step by step:

1. Verify Your SCSS Compilation Output Path #

First, let’s confirm if your SCSS is actually compiling to build/main.css:

• Check your build tool configuration (Webpack, Vite, Gulp, etc.). Look for output settings—for example, Vite defaults to dist/assets/[hash].css, while Webpack might output to dist/main.css depending on your setup. Make sure the output path matches what you’ve referenced in the SVG.
• Test manual compilation: Run sass src/your-main-file.scss build/main.css (adjust the source path to match your SCSS file) and check if the build folder now contains a main.css file with your defined classes. Open the CSS file to confirm your styles are present.

2. Fix the Stylesheet Path in Your SVG #

The href in <?xml-stylesheet> is relative to the SVG file’s location, not the HTML page that embeds it:

• For example, if your SVG lives at assets/icons/my-icon.svg and build/main.css is in the root project folder, the correct path would be ../build/main.css (to go up one level from the SVG’s folder to the root, then into build).
• Test with an absolute path temporarily (like /build/main.css) to rule out relative path confusion—if styles start working, you know the relative path was incorrect.

3. Double-Check SVG Element Class Names & Context #

• Ensure the elements in your SVG have the exact class names you defined in your SCSS. A typo (like .svg-element vs .svgElement) will break styles.
• Remember: When using <object> to embed SVG, the SVG runs in its own document context. HTML page styles won’t affect it—only styles linked/embedded directly in the SVG will work, which you’re already doing with <?xml-stylesheet>, so this part is correct as long as the path is right.

4. Clear Browser Cache #

Old cached CSS files can prevent new styles from loading:

• Force a hard refresh (Ctrl+F5 on Windows/Linux, Cmd+Shift+R on Mac) to bypass cached assets.
• You can also add a cache-busting query parameter to the CSS path, like build/main.css?v=2, to ensure the browser loads the latest version.

内容的提问来源于stack exchange，提问作者stephen