Vue+Postcss:variable '--color6' is undefined and used without a fallback

问题

在使用vue+postcss开发前端应用的时候，我们往往会定义一些css变量来保证页面的颜色表现一致，从而管理页面的风格。
比如palette.css：

/* RGB */
:root {
  --color1: #adaabf;
  --color2: #091740;
  --color3: #072b59;
  --color4: #383d40;
  --color5: #0d0d0d;
  --color6: #fff;
}

定义完变量后在js/ts setup文件中引入，如下：
然而结果在编译的时候会出现：

1. palette.css文件没有生效；
2. 出现变量未定义的warning，比如variable ‘–color6’ is undefined and used without a fallback；

这个时候怎么处理呢?

解决方式

使用postcss-import插件。

配置方式如下：

module.exports = {
  plugins: [
    require('postcss-import')({
      path: 'src/asset'
    })
  ]
 }

这里要注意的是path的配置路径，一定要和你的全局css文件目录一致，而且这种方式在使用的时候必须要引入全局文件，使用与path的相对路径：

@import 'palette.css';

body {
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.content-sub-header {
  color: var(--color6);
}