Question

我面临一个奇怪的问题，即我的vue组件中的样式没有与模板和脚本一起编译和应用。

我在下面包含了我的代码。目的是在单击按钮时为隐藏文本上的幻灯片淡入淡出设置动画。实际结果是文本变为可见，但未将css应用于文本。

app.vue

<template>
  <div>
    <button @click="show = !show">
      Click Me
    </button>
    <transition name="slide-fade">
      <p class="test-style" v-if="show">This is a hidden message.</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
  };
</script>

<style scoped>
  .test-style {
    color: red;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

app.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render: h => h(App),
});

编辑-2020年8月10日

这是我的package.json

{
  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "css-loader": "^4.2.1",
    "nodemon-webpack-plugin": "^4.3.2",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Answer 1

好的，我终于弄清楚了。问题出在packages.json devDependencies上。特别是css-loader版本^4.2.1必须以某种方式损坏或超级越野车。我将版本更改为^2.1.0，现在样式加载得很好并且带有scoped参数。感谢Boussadjra Brahim设置了沙箱，这对我解决问题非常有帮助。

Vue样式未应用

编辑-2020年8月10日

1 个答案: