vite怎么配置全局postcss变量？

Question

官网有sass的，其他问题也只能搜索到less的，但是我替换成postcss之后就不行了。

这是less的：

export default {
css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('src/style/global/config.less')}";`,
          },
          javascriptEnabled: true,
        }
      }
    },
}

这是官网 sass的：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
}

Answer 1

less/sass 本身是预处理器有全局变量的需要，vite 给了对应的配置。

但 postcss 并非预处理器，它是一个 CSS 转译框架，将 CSS 编译为 AST 并提供 API 给插件做功能实现，postcss 的插件例如 precss 提供了类 Sass 的预处理功能，并非是 postcss 本身的能力，理论上 vite 并没有对 postcss 提供全局变量设置的理由，你可以查一查 postcss 的插件有没有提供全局变量配置。

Answer 2

你看看是不是版本问题

scss: {
    prependData: "@import '@/common/mixin.scss';",
},