vue.js - 为什么给组件用SCSS不会生效，使用css就会生效？

问题描述

问 题

如题，而且没有报错。

    <template>
        <div class="welcome-page">
                <div class="title">title</div>
                <div class="nick-text">NickName<input v-model="nickName" name="nickname-input"></div>
                <div class="sure-button" v-on:click="connectSocket">确定</div>            
        </div>
    </template>
    
    <script>
    export default {
      name: 'welcomePage',
      data () {
        return {
          nickName: ''
        }
      },
      methods: {
        connectSocket: function () {
          console.log('that is awesome')
        }
      }
    }
    </script>
    
    <link lang="scss" href="../css/global.scss">
    
    <style lang="scss">
      .welcome-page{
           background-color:red; //这里不起作用，如果把lang="scss"去掉就可以了，然而就变成了css样式。
      }
    </style>
    
    
    
    
    并且，在根节点（App.vue）使用scss就会生效。
    

解决方案

已解决。

vue-cli模板中link标签不生效并出错。
所以可以在scss中使用@import来导入其他scss文件。

将 <link lang="scss" href="../css/global.scss">删除

在style scss中插入 @import "../css/global.scss";

这篇关于vue.js - 为什么给组件用SCSS不会生效，使用css就会生效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！