vue引入公用css

在Vue中引入公用的CSS样式有两种方法。

第一种是使用全局引入的方式，在项目的入口文件(main.js)中，通过import语句引入CSS文件，以确保CSS样式可以在整个项目中使用。例如：

import Vue from 'vue'
import App from './App.vue'
import './assets/css/common.css'

new Vue({
  render: h => h(App),
}).$mount('#app')

这样，`./assets/css/common.css`中定义的CSS样式就可以在整个项目的组件中使用了。

第二种是在需要使用公用CSS样式的组件中，使用import语句引入CSS文件。在需要使用CSS样式的组件的`<style>`标签中，使用`@import`引入CSS文件。例如：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import './assets/css/common.css'

export default {
  // 组件逻辑
}
</script>

<style>
/* 其他样式 */
</style>

这样，组件中定义的样式和公用CSS样式可以共同生效。

无论选择哪种方式引入公用CSS，都可以使得CSS样式在整个项目中重用，提高代码的复用性和开发效率。

相关问题

vue公用的css放在哪里

通常情况下，Vue 公用的 CSS 可以放在一个单独的 CSS 文件中，然后在 Vue 组件中通过 import 引入。另外，也可以在 Vue 组件中使用 scoped CSS，这样可以确保样式只作用于当前组件，不会影响到其他组件。

uniapp公用css样式

以下是两种在uniapp中引入公共CSS样式的方法：

1. 在app.vue文件中引入：

<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
  },
  onShow: function() {
    console.log('App Show')
  },
  onHide: function() {
    console.log('App Hide')
  }
}
</script>

<style lang="scss">
/* 每个页面公共css */
@import "uview-ui/index.scss";

uni-page-body {
  // 设置页面高度为100vh
  // height: 100vh;
}

/* #ifdef H5 */
uni-page-head {
  display: none;
}
/* #endif */
</style>

2. 在项目入口文件main.js中引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "./assets/css/global.css"
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')