gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:28:19 26 4
gpt4 key购买 nike

我的 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 没有像“@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 也有效。因此,您必须在每个组件中导入变量。

关于css - 如何使用 PostCSS 在 Vue 中导入全局 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51587941/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com