vite项目使用全局样式(less|scss)

1、前言

vue2.0 + webpack 时代，配置预编译和全局样式，总需要安装一堆插件来配合。如今vue3 + vite 已来，少了很多不必要的配置。

2、webpack 中的使用

使用npm安装less

npm install less --save

安装less-loader

npm install [email protected] --save-dev

注意使用高版本run serve会有问题 这里使用的7.x版本

安装style-resources-loader和vue-cli-plugin-style-resources-loader

npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

在vue.config.js文件中配置

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局less变量存储路径
        path.resolve(__dirname, './src/assets/css/base.less'),
      ]
    }
  }
}

注意目录配置方式./src/assets/css/base.less 修改你全局less文件所在的位置 目录不可使用简写方式 例如@/assets方式

使用方式

注：不需要在任何地方导入less文件就可以使用了

style标签必须指令lang="less" 、@color-high-text就是你所定义的全局变量了

4、vite 中使用less

使用npm安装less和less-loader

npm install less --save
npm install [email protected] --save-dev

注意：此处也可以合并指令

在vite.config.ts文件中配置

css: {
  // css预处理器
  preprocessorOptions: {
    less: {
      charset: false,
      additionalData: '@import "./src/assets/style/global.less";',
    },
  },
},

5、vite 中使用scss

使用npm安装less和less-loader

npm install sass --save
npm install sass-loader --save-dev

注意：此处也可以合并指令，也可以简写

在vite.config.ts文件中配置

css: {
  // css预处理器
  preprocessorOptions: {
    scss: {
      charset: false,
      additionalData: '@import "./src/assets/style/global.scss";',
    },
  },
},

样式的使用方式是跟之前的一样，文中也有提到，可以翻看记录。

常用样式如下（自参考）

.cursor-pointer {
  cursor: pointer;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  padding: 0;
  margin: 0;
}

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  color: #333;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

a {
  text-decoration: none;
}

input {
  border: none; //去除边框
  outline: none; //可以去除点击input时的border
}

@keyframes scaleBig {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

// swiper5张背景图的动画
.animate-img {
  animation: scaleBig 3s linear 1s forwards;
}

点赞加关注，永远不迷路