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

Posted 2023-02-23

【中文标题】如何使用 PostCSS 在 Vue 中导入全局 CSS？

【英文标题】：How to import global css in Vue with PostCSS?

【发布时间】：2019-01-06 08:21:47

【问题描述】：

我的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 全局中导入 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

【问题讨论】：

我使用PostCSS插件而不使用sass

【参考方案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 也有效。所以你必须在每个组件中导入变量。

【讨论】：

我已经添加了postcss-advanced-variables，当我在每个.vue 组件中@import 'variables.css' 时它就可以工作了。