如何用sed将CSS文件内联到HTML？解决替换报错问题

The error you're seeing happens because two key issues with your original sed command:

1. CSS files often contain forward slashes (/) which clash with sed's default separator for the s/// command.
2. Newlines in the CSS file break the shell command substitution, causing sed to receive an incomplete s expression.

Here are a few reliable fixes and alternatives:

1. Switch Sed's Separator (Quick Fix for Simple CSS) #

Instead of using / as the separator in sed, pick a character that doesn't appear in your CSS (like | or #). This avoids conflicts with slashes in CSS rules (e.g., url(/assets/image.jpg)):

sed "s|<link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\">|<style>$(cat style.css)<\/style>|" index.html

Note: This still might fail if your CSS has the separator character (e.g., |) or complex special characters. For more robust handling, use the Perl method below.

2. Use Perl (Robust for Any CSS) #

Perl handles multi-line content and special characters far better for this task. Instead of relying on shell command substitution (which mangles newlines), let Perl read both files directly:

perl -0777 -e '
    # Read the entire CSS file into a variable
    open my $css_fh, "<", "style.css" or die "Can't open style.css: $!";
    my $css_content = do { local $/; <$css_fh> };
    close $css_fh;

    # Read the entire HTML file into a variable
    my $html_content = do { local $/; <> };

    # Replace the link tag with inline style
    $html_content =~ s/<link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\">/<style>$css_content<\/style>/g;

    # Print the modified HTML
    print $html_content;
' index.html > modified_index.html

The -0777 flag tells Perl to read the entire HTML file as a single string, so it doesn't miss the link tag if it spans lines (though it shouldn't).

3. Preprocess CSS to Escape Special Characters (For Sed) #

If you must use sed, preprocess the CSS to escape characters that break the shell and sed:

# Escape newlines, slashes, and shell special characters
escaped_css=$(sed -e 's/\\/\\\\/g' -e 's/\//\\\//g' -e 's/\n/\\n/g' -e 's/"/\\"/g' style.css)

# Run the sed replacement
sed "s/<link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\">/<style>$escaped_css<\/style>/g" index.html

This works but is fragile—you might need to add more escape rules if your CSS has other special characters (like $, &, or backticks).

Why Your Original Command Failed #

When you use $(cat style.css), the shell inserts the raw CSS content into the sed command. Any newline in the CSS tells the shell "this command is done," leaving sed with a truncated s expression. Additionally, forward slashes in the CSS are interpreted as sed's command separator, causing the unterminated 's' command error.

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