Flex 编译CSS文件的错误：Invalid Embed directive in stylesheet

今天试图重新改变现有的CSS Framework，放弃之前自定义的CSSLoader，采用运行时加载CSS的方式。

不过目前还是做尝试，需分析两种方式所能处理的各种情况，找出需要处理的特殊情况，然后分析是否值得更改。

 

采用运行时加载CSS的方式

 

需将CSS文件预编译成SWF文件，看了网上提供的方式，发现直接在Flex Builder中compile，找不到生成的SWF文件。。也不是很了解其中的机制，于是采用另外一种方式，切换到Flex Builder的安装目录，找到SDK下的bin目录mxmlc.exe，执行，输入命令mxmlc path/test.css,然后在path下会生成相应的test.swf。

不过在编译的时候出现错误：

Invalid Embed directive in stylesheet - can't resolve source 'Embed("/assets/test.png")'

 

搜索了半天发现中文只有少量帖子关于这个问题，但是并没有解决方案，于是切换搜英文的，果然发现很多相关帖子，简而言之根本原因就是Embed中提供的路径有问题，编译时无法根据给出的路径找到相应的文件。

下面贴出解决方案以及一些有用的回复，我就懒得翻译了，反正大部分人都能看懂英文：

写道

Invalid Embed directive in stylesheet
On a few occasions now, for no really apparent reason, suddenly our Problem Pane will be spammed with tons of messages all sort of looking like this:

Invalid Embed directive in stylesheet - can't resolve source 'Embed(source = "/assets/common.swf", symbol = "AccordionHeader_disabledOverSkin")'.

In the past, sometimes it would only happen on a mac, other times windows machines. I've tried deleting my bin folder, cleaning the project, recompiling the swf's, moving the swf's around, changing the syntax in the css ever so slightly. I've googled this on many occasions and found no clear answer. Today I decided that I needed to know what caused this and if in fact I figured it out, to share it with you.

What ended up being the root cause of our problem is that in several places in the application we were referencing image assets directly in our assets folder, i.e. /assets/delete.png, which is often the case when our designers aren't keeping up with asset creation and developers just throw some image up as a placeholder for the time being. Now it just so happened that ONE of these references was incorrect and its Embed pointed to a file that did not exist. I discovered this when I commented out our style css references in the application, and saw the error only then. It was this broken reference that caused the above error. I fixed the reference to point to the right file, did a Project clean, and all the Invalid Embed Directive errors went away.

I should note that we had over 100 references to symbols in our css, and by default Flexbuilder only shows the first 100 errors. Unluckily the "unable to resolve 'assets/deleted.png' for transcoding in ...." was error number 138 and did not show up in the list. I had to change my preferences to show all 138 errors.

So the lesson learned is that when you get spammed with this error, it could well be that only one Embed tag somewhere in your app is actually broken, and that your css and swf is probably just fine.

 

符合我的情况的回复：

写道

Just thought I'd add that I've run into this error in the past specifically when compiling with the command line compiler or with flex ant tasks. I was experiencing an issue where FB's built in compiler would compile without errors, but the command line/ant compilers would return with the "Invalid Embed" errors. It turned out that for some reason the command/ant compilers were having difficulty resoloving abosolute paths such as '/assets/images/myImage.png'. I was able to resolve the errors by changing the absolute path references to relative path references such as '../../../assets/images/myImage.png' in files that were reporting errors.