Search code examples
cssvue.jspostcsspostcss-loader

How to import global css in Vue with PostCSS?


My Vue project structure: styles directory includes all css file.

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

The src/styles/main.css import other css just like:

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

I want to import the src/styles/main.css in Vue global. That is:

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');

Then I can directly use the variable defined in variables.css in every .vue component. Like:

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

But the postcss-loader failed to resolve the $primary variable:

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error

(79:10) Could not resolve the variable "$primary" within "$primary"

How can I import global main.css so I don't need to @import 'variables.css' in every .vue compoment?

The demo repository is here: https://github.com/Jancat/vue-cli-ts-demo


Solution

  • I think PostCss does not have a variable syntax like "@variable". This rather looks like SASS or LESS. I think you have to install a separate plugin to get such variables working with PostCSS: https://www.npmjs.com/package/postcss-variables

    PostCSS uses this syntax: https://github.com/postcss/postcss-custom-properties

    EDIT:

    Ok, after some research I found this information: https://github.com/vuejs/vue-loader/issues/328

    I am quite sure that this is also valid for postcss-custom-properties. So you will have to import the variables in each component.