未应用 Vue 样式答案

【问题标题】：Vue style is not being applied未应用 Vue 样式
【发布时间】：2022-02-09 12:01:06
【问题描述】：

我遇到了一个奇怪的问题，我的 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"
}

【问题讨论】：

你试过没有scoped吗？
它应该可以检查这个codesandbox.io/s/vue-template-x9rno
它也适用于我的沙箱，所以可能与浏览器不支持样式有关？
嗯。我想知道 webpack 如何构建它是否有问题。我的 package.json 文件看起来不像你的 BoussadjraBrahim
我添加了我的 package.json 文件。我将尝试使用您包含在沙箱中的 package.json 文件来查看是否可以解决任何问题。同样是的，我已经尝试过没有scoped。

标签： javascript css vue.js

【解决方案1】：

好的，我终于想通了。问题在于packages.jsondevDependencies。特别是css-loader 版本^4.2.1 必须以某种方式损坏或超级错误。我将版本更改为^2.1.0，现在样式加载得很好，并带有scoped 参数。感谢 Boussadjra Brahim 设置了沙盒，这对我解决问题很有帮助。

【讨论】：

【解决方案2】：

我只是在学习 VueJS 3 和 Larave 8，我正在尝试同样的问题，但这是因为我没有运行

npm 运行开发

控制台中的命令。

【讨论】：