vue3.x scss语法支持

Z时代
2024-01-10
分类：综合

vue

安装sass-loader

npm install sass-loader@10.2.0 --save-dev

安装node-sass

npm install node-sass --save-dev

重启服务

npm run serve

App.vue

<template>
    <div id="app">
        <Example></Example>
    </div>
</template>
<script>
    import Example from './components/Example'
    export default {
        name: 'App',
        components:{
            Example
        }
    }
</script>
<style scoped>
</style>

Example.vue

<template>
    <div id="example">
        <p>scss语法支持</p>
        <ul>
            <li>li1</li>
            <li>li1</li>
            <li>li1</li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: "Example",
    };
</script>
<style scoped lang="scss">
    #example{
        p{
            text-align: center;
            color:#fff;
            background-color: #0c63e4;
        }
        ul {
            list-style: none;
            li {
                width: 50%;
                margin: 0 auto;
                background-color: #ccc;
            }
        }
    }
</style>