当前位置：首页 > news >正文

同时将scss全局变量注入、Tailwind样式使用、自己插件配置到vite

news 2025/1/7 20:44:12

将scss或者less变量注入到全局中

理由：定义的全局scss或者混合或函数不想一直导入

来到vite的配置中也就是vite.config.js或者.ts

   css: {preprocessorOptions: {scss: {api: 'modern-compiler',// 如果还有其他的、分号后面在使用@use// 注意：必须使用@useadditionalData: '@use  "@/styles/global.scss" as *;',  }}}

新增Tailwind

看这里

写自己的postcss插件

 question: 为啥要自己写插件answer: 比如说我现在想自己处理某些px转换、我想细微控制等等

  // 源码小满zs、 部分有作者更改interface defaultOptionsType {viewPortWidth: number;mediaQuery?: boolean;unitToConvert: string;}const defaultOptions: defaultOptionsType = {viewPortWidth: 375,mediaQuery: false,unitToConvert: "px",};const pxToViewport = (options = defaultOptions): Plugin => {const opt = Object.assign({}, defaultOptions, options);return {postcssPlugin: "postcss-px-to-viewport",//css节点都会经过这个钩子Declaration(node) {const value = node.value;// 这么做可解决复合属性问题、例如 border: 1px solid #ccc;const pxRegex = new RegExp(`(\\d*\\.?\\d+)${opt.unitToConvert}`, "g");node.value = value.replace(pxRegex, (_, p1) => {const num = parseFloat(p1);const transformValue =((num / opt.viewPortWidth) * 100).toFixed(3) + "vw";return transformValue;});},};
};

// 在来到vite.config.tscss: {preprocessorOptions: {scss: {api: 'modern-compiler',additionalData: '@use  "@/styles/global.scss" as *;'}},postcss: {plugins: [pxToViewport({viewPortWidth: 1920,unitToConvert: "px",}),]}}

上述的操作会为postcss 新增一个插件、不过这样会导致Tailwind和autoprefixer等插件失效

import Tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'postcss: {plugins: [Tailwind,    // 这里不能 require("tailwindcss")autoprefixer, // 这里不能 require("autoprefixer")pxToViewport({viewPortWidth: 1920,})]}

上述不能的原因是因为require是common.js的语法、现在是esmModlue
经过这些你既使用自定义的变量 Tailwind提供的便利class 还有自己控制pxToViewport的插件（你可以自己处理css）

额外配置

import Tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'postcss: {plugins: [Tailwind(),   // 除了变量以外 还可是函数、这样就可以额外进行配置   autoprefixer(),  // 同理pxToViewport({viewPortWidth: 1920,unitToConvert: "px",})]}