Блог

У меня есть простая страница, к которой я применяю цвет фона. Мой SCSS работает идеально, но когда я создаю файл scoped , SCSS страницы не работает. Мне нужно сохранить область действия этого компонента, чтобы он не передавал этот цвет фона дочерним компонентам.

Почему мой код SCSS не работает в файле с областью действия? Я не получаю никаких ошибок, просто мой SCSS не влияет на страницу.

Это основной компонент:

 <template>
  <div class="container-fluid">
    <form @submit.prevent="userLogin" class="login-form">
      <h3>Sign In</h3>

      <div>
        <label>Email address</label>
        <input type="email" v-model="user.email" />
      </div>

      <div>
        <label>Password</label>
        <input type="password" v-model="user.password" />
      </div>

      <button type="submit">Sign In</button>
    </form>
     <md-card class="login-card">
      <md-card-content>
         <p class="options-txt">Options</p>
          <p class="options-num">1,000</p>
      </md-card-content>
    </md-card>
  </div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import store from '../store/store'
export default {
  name: "Login",
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
async userLogin() {
        try {
            await firebase.default.auth().signInWithEmailAndPassword(this.user.email, this.user.password);
            let userId = firebase.auth().currentUser.uid;
            const starCountRef = firebase.database().ref(userId);
            starCountRef.on('value', function(snapshot) {
               store.commit('saveApiKey', snapshot.val().apiKey)
            });
            this.$router.push('/home')
        } catch (error) {
            alert(error.message);
        }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../variables";

body {
      background: linear-gradient(to bottom, $vegetation 50%, $gray 50%);
}

.login-card {
  display: flex;
  flex-direction: column;
  width: 480px;
  margin: 0 auto;
  margin-top: 100px;
  vertical-align: middle;
  border-radius: 12px; 
}
</style>
  

Как я уже говорил в своем комментарии, когда компонент есть scoped , любые стили применяются только к элементам внутри этого компонента, вы не можете стилизовать body тег.

Одним из обходных путей является установка фона в created хук и удаление его в beforeDestroy хук:

 <template>
  <div class="container-fluid">
    <form @submit.prevent="userLogin" class="login-form">
      <h3>Sign In</h3>

      <div>
        <label>Email address</label>
        <input type="email" v-model="user.email" />
      </div>

      <div>
        <label>Password</label>
        <input type="password" v-model="user.password" />
      </div>

      <button type="submit">Sign In</button>
    </form>
     <md-card class="login-card">
      <md-card-content>
         <p class="options-txt">Options</p>
          <p class="options-num">1,000</p>
      </md-card-content>
    </md-card>
  </div>
</template>

<script>
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import store from '../store/store'
export default {
  name: "Login",
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
    async userLogin() {
        try {
            await firebase.default.auth().signInWithEmailAndPassword(this.user.email, this.user.password);
            let userId = firebase.auth().currentUser.uid;
            const starCountRef = firebase.database().ref(userId);
            starCountRef.on('value', function(snapshot) {
               store.commit('saveApiKey', snapshot.val().apiKey)
            });
            this.$router.push('/home')
        } catch (error) {
            alert(error.message);
        }
    }
  },
  created() {
    document.body.style.background = 'linear-gradient(to bottom, green 50%, gray 50%)';
  },
  beforeDestroy() {
    document.body.style.background = 'whatever color it was originally';
  }
}
</script>

<style lang="scss" scoped>
@import "../../variables";

.login-card {
  display: flex;
  flex-direction: column;
  width: 480px;
  margin: 0 auto;
  margin-top: 100px;
  vertical-align: middle;
  border-radius: 12px; 
}
</style>
  

Тем не менее, вы не сможете использовать свои переменные SCSS таким образом.

Если вы хотите изменить стиль своего тела для всех страниц вашего приложения, вы можете добавить файл CSS и вызвать его непосредственно в своем /public/index.html

Это не лучшая практика, но я отлично работаю 😉