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

1、前言

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

2、webpack 中的使用

使用npm安装less

npm install less --save

安装less-loader

npm install less-loader@7.x --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方式

使用方式

<style lang="less" scoped>
  .info-contaner {
    background-color: @color-high-text;
    height: 90px;
    width: 100%;
  }
</style>

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

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

4、vite 中使用less

使用npm安装less和less-loader

npm install less --save
npm install less-loader@7.x --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";',
    },
  },
},

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

点赞加关注，永远不迷路