如何使用PostCSS在Vue中导入全局css

Question

MyVue项目结构：styles目录包含所有css文件。

src
├── assets
├── components
├── styles
│   ├── main.css
│   ├── normalize.css
│   └── variables.css
├── views
├── App.vue
├── main.ts
├── router.ts

src/styles/main.css导入其他css就像：

@import 'normalize.css';
@import 'variables.css';

我想在Vue全局中导入src/styles/main.css。即：

import Vue from 'vue';
import './styles/main.css';  // global
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');

然后我可以在每个.vue组件中直接使用variables.css中定义的变量。类似：

<style lang="postcss" scoped>
a {
color: $primary;  // defined in variables.css
}
</style>

但是postcss-loader未能解析$primary变量：

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error
(79:10) Could not resolve the variable "$primary" within "$primary"

如何导入全局main.css，这样就不需要在每个.vue组件中导入@import 'variables.css'？

演示存储库位于此处：https://github.com/Jancat/vue-cli-ts-demo

Answer 1

我认为PostCss没有像"@variable"这样的可变语法。这看起来更像SASS或更少。我认为你必须安装一个单独的插件才能让这些变量与PostCSS一起工作：https://www.npmjs.com/package/postcss-variables

PostCSS使用以下语法：https://github.com/postcss/postcss-custom-properties

编辑：

好的，经过一些研究，我发现了以下信息：https://github.com/vuejs/vue-loader/issues/328

我确信这对于postpass自定义属性也是有效的。因此，您必须导入每个组件中的变量。