我在Vue.jsv2上,我有一个CSS样式表,它以字符串的形式存储在变量中。
import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';
我需要从我的元件建立标签。
<style v-html="sitePackCss" />
或
<style>{sitePackCss}</style>
当我执行其中一项操作时,控制台中出现以下错误:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
如何将此标记放到页面上?
注意:我知道这是一个很笨拙的,非首选的包含样式的方法。这个解决方案只会用在故事书的上下文中,在那里我需要包含特定故事的特定CSS文件(没有故事书/webpack将它们添加到每个故事中)。如果我使用普通的webpack加载器,每个标签都会添加到 every 故事中。将样式作为字符串导入是我发现的避免这种行为的唯一方法。
2条答案
按热度按时间hgc7kmma1#
尝试将样式添加到SFC中样式的
src
标记:hkmswyz62#
这似乎行得通!
在模板中:
注意:sass文件引用的字体在使用此技术时不能正常工作。我必须更新staticDirs配置才能使这些路径正常工作。https://storybook.js.org/docs/react/configure/images-and-assets