主页（八）-配置less或sass预处理环境 & less文件要写成嵌套关系

配置less或sass环境

• 安装相关依赖包

npm install node-sass sass-loader -D

npm install less less-loader -D

• 样式标签配置scss

<style scoped lang='scss'>
  @import 'main.scss'
</style>

第一步：安装less包或sass包

第二步：在所需页面home文件夹下，新建main.less样式文件

第三步：把home文件夹下的index.vue文件里面的样式文件，剪切粘贴到main.less中

注意：如果样式标签有嵌套关系，需要进行整合，不要扁平化，而要写成嵌套关系

swiper {
  img {
    width: 750rpx;
  }
}
.menu {
  display: flex;
  padding: 10rpx;
  img {
    flex: 1;
    height: 160rpx;
  }
}

.floor {
  .floor-title  {
    padding: 10rpx;
    background-color: #eee;
    img {
      height: 100rpx;
    }
  }
  .floor-content {
    display: flex;
    padding: 20rpx;
    .left {
      padding-right: 10rpx;
      img {
        width:232rpx;
        height:385rpx;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        width:232rpx;
        height:188rpx;
        border-radius:4px;
      }
    }
  }
}

.totop {
  position: fixed;
  bottom: 50rpx;
  right: 50rpx;
  border-radius: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background: rgb(255, 255, 255, 0.5);
  text-align: center;
  font-size: 14px;
}

第四步：在所需页面home/index.vue文件中的样式模块里，进行引入main.less文件

<style scoped lang='less'>
  @import './main.less';
</style>

文件结构为