如何使用 PostCSS 在 Vue 中导入全局 css?
How to import global css in Vue with PostCSS?
我的 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'
?
我认为 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 也有效。所以你必须在每个组件中导入变量。
我的 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'
?
我认为 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 也有效。所以你必须在每个组件中导入变量。