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

Question

我的Vue項目結構： 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 global中導入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或LESS。 我認為你必須安裝一個單獨的插件來使這些變量與PostCSS一起使用： https ：//www.npmjs.com/package/postcss-variables

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

編輯：

好的，經過一些研究我發現了這個信息： https ： //github.com/vuejs/vue-loader/issues/328

我很確定這對postcss-custom-properties也有效。 因此，您必須在每個組件中導入變量。