相关疑难解决方法(0)

我试图在一个元素中绑定图像的src,但它似乎不起作用.我得到一个"无效的表达式.生成的函数体:{backgroundImage:{url(image)}".

该文件说要使用'烤肉串案例'或'驼峰案例'.

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

这是一个小提琴:https://jsfiddle.net/0dw9923f/2/

是否可以在样式中添加动态变量？

我的意思是:

<style>
 .class_name{
  background-image({{project.background}});
 }
@media all and (-webkit-min-device-pixel-ratio : 1.5),
 all and (-o-min-device-pixel-ratio: 3/2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
 .class_name{
  background-image({{project.background_retina}});
 } 
}
</style>

我有一个vue.js应用程序,它与webpack捆绑在一起.我用vue-server-renderer它来在服务器端渲染它.那里的一切都很棒.在我的webpack配置中,我正在使用ExtractTextPlugin:

new ExtractTextPlugin({
  filename: `css/[name]${isProduction ? '.[hash]' : ''}.css`,
  allChunks: true
})

如果我使用allChunks: true然后我得到一个单一的CSS文件一切正常.但是在一个不太理想的大型应用程序中.现在我有一堆加载但没有在页面上使用的CSS.

如果我设置allChunks: false然后我得到一个较小的初始文件,并且当前组件的css在页面加载时被注入头部.这几乎是我想要的.但问题是如果您使用SSR然后在页面中获得初始HTML而没有CSS,那么当CSS加载时,所有内容都会被正确呈现.

我想要的是在我的SSR渲染功能期间,我可以访问当前页面的CSS并在返回浏览器之前将其自己注入头部.

我试图建立一个webpack加载器,但我不认为这是正确的,我遇到了问题css-loader.

我觉得应该是有问题vue-loader或vue-server-renderer.不确定从哪里开始.所以我想我正在寻找一些指导,有其他人想出这个,或者可以指出我正确的方向.

这是我的 Button vue 对象。我想根据道具改变颜色

<template>
    <div class="get-started-btn flex center"
         style="cursor: pointer;
            padding: 0px 15px;
            height: 36px;
            color: {{color}} ">
            {{text}}
    </div>
</template>

<script>
    export default {
        name: "Button",
        props:{
            text:String,
            color: String,
            backgroundColor: String,
        }
    }
</script>

<style scoped>
.get-started-btn{
    background-color: {{backgroundColor}};
}
</style>

例如：

    <Button text="Mark As Done" color="white" backgroundColor="#1cb86e"></Button>

或者

  <Button text="Get Started" color="white" backgroundColor="#299ff6"></Button>

但它没有编译

我目前正在尝试允许使用引导程序对我的组件进行自定义主题。我想在 Vue 组件部分内的 SCSS 中设置其 $primary 标签，例如当前我的样式如下所示：

<style scoped lang="scss">
$primary: #FF1493;
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

因此，我正在寻找一种方法，可以根据组件收到的道具来自定义十六进制代码。感谢您的帮助。

从评论输入后进行编辑，这是尝试过的，但没有成功：

<template>
 <div style="style="{ '--test': #ff1493 }"">
 </div>
</template>

<style scoped lang="scss">
$primary: var(--test);
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

虽然在SCSS中会导致以下编译错误：

SassError: argument `$color` of `darken($color, $amount)` must be a color
        on line 181 of …