webpack 如何< style>在Vue.js组件中添加标签

svujldwt  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(141)

我在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 故事中。将样式作为字符串导入是我发现的避免这种行为的唯一方法。

hgc7kmma

hgc7kmma1#

尝试将样式添加到SFC中样式的src标记:

<style lang="sass" src="../../app/javascript/styles/site.sass">

</style>
hkmswyz6

hkmswyz62#

这似乎行得通!

import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';

在模板中:

<component is="style" type="text/css">${sitePackCss}</component>

注意:sass文件引用的字体在使用此技术时不能正常工作。我必须更新staticDirs配置才能使这些路径正常工作。https://storybook.js.org/docs/react/configure/images-and-assets

相关问题