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>