javascript - Vue style is not being applied - Stack Overflow

admin管理员组

文章数量:1410682

I am facing a strange problem in which the style in my vue ponent is not being piled and applied along with the template and script.

I've included my code below. The intention is to animate a slide fade on the hidden text when I click the button. The actual result is the text bees visible but the css is not applied to it.

---

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),
});

Edit - Aug 10th, 2020

This is my 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-piler": "^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"
}

I am facing a strange problem in which the style in my vue ponent is not being piled and applied along with the template and script.

I've included my code below. The intention is to animate a slide fade on the hidden text when I click the button. The actual result is the text bees visible but the css is not applied to it.

---

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),
});

Edit - Aug 10th, 2020

This is my 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-piler": "^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"
}

• javascript
• css
• vue.js

Share Follow edited Aug 10, 2020 at 18:06 Michael Miller asked Aug 7, 2020 at 19:38 Michael MillerMichael Miller 22544 silver badges1212 bronze badges 6

• did you try it out without scoped? – Boussadjra Brahim Commented Aug 7, 2020 at 19:50
• it should work check this codesandbox.io/s/vue-template-x9rno – Boussadjra Brahim Commented Aug 7, 2020 at 20:23
• It works in the sandbox for me too, so maybe it's got something to do with the browser not supporting the styles? – marsnebulasoup Commented Aug 8, 2020 at 0:30
• Hmm. I'm wondering if its a problem with how webpack is building it. My package.json file doesn't look anything like yours BoussadjraBrahim – Michael Miller Commented Aug 10, 2020 at 18:00
• I added my package.json file. I'm gonna try to use the package.json file that you included in your sandbox to see if that fixes anything. Also yes I had already tried it without scoped. – Michael Miller Commented Aug 10, 2020 at 18:07

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

OKAAAY I finally figured it out. The problem was with the packages.json devDependencies. Specifically the css-loader version ^4.2.1 must somehow be corrupt or super buggy. I changed the version to ^2.1.0 and now the style is loaded just fine and with the scoped param. Thank you Boussadjra Brahim for setting up the sandbox, that was very helpful in my problem-solving.

I am just learning VueJS 3 along with Larave 8 and I was experimenting the same problem, but it was because I didn't run the

npm run dev

mand in the console.

本文标签： javascriptVue style is not being appliedStack Overflow