Vue 使用Less和scoped

scoped

作用:让样式在局部生效,防止冲突

<style scoped>
    .demo{
        background-color: skyblue;
    }
</style>

less-loader

在Vue文件中使用less语法,需要安装less-loader

webpack4的安装less-loader7,

webpack5的安装less-loader8,9,10等

//查看所有webpack的版本
npm view webpack versions 
 
//查看所有less-loader的版本
npm view less-loader versions

//安装less-loader7最新版本
npm i less-loader@7

查看当前项目中所使用的webpack版本

在node_modules → 找到webpack → package.json

如下当前使用的webpack版本是4.28.4

 

<style lang="less" scoped>
    .demo{
        background-color: pink;
        .atguigu{
            font-size: 40px;
        }
    }
</style>

 

posted @ 2022-11-17 15:18  weslie  阅读(421)  评论(0)    收藏  举报