vue如何引入公共css文件

在Vue项目中引入公共CSS文件主要有1、在main.js文件中引入、2、在App.vue文件中引入和3、在vue.config.js文件中配置三种常见方法。以下详细介绍这些方法，并给出相应的代码示例。

一、在main.js文件中引入

这是最直接的方法，适用于需要在整个应用中使用的公共CSS文件。

1. 首先，将公共CSS文件放置在项目的src/assets目录下。例如，文件名为global.css。
2. 在main.js文件中引入公共CSS文件。

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入公共CSS文件
import './assets/global.css'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式引入的CSS文件会在整个应用中生效。

二、在App.vue文件中引入

这种方法适用于需要在根组件中使用的公共CSS文件。

1. 同样，将公共CSS文件放置在项目的src/assets目录下。例如，文件名为global.css。
2. 在App.vue文件的<style>标签中引入公共CSS文件。

<!-- App.vue -->

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<!-- 引入公共CSS文件 -->
<style src="./assets/global.css"></style>

通过这种方式引入的CSS文件会在根组件及其子组件中生效。

三、在vue.config.js文件中配置

这种方法适用于需要在编译时全局引入的公共CSS文件。

1. 将公共CSS文件放置在项目的src/assets目录下。例如，文件名为global.css。
2. 在项目根目录下创建或编辑vue.config.js文件，添加CSS文件的路径到配置中。

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 这里的options会传递给css-loader
      },
      postcss: {
        // 这里的options会传递给postcss-loader
      }
    }
  },
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('css').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('style-resources-loader')
        .loader('style-resources-loader')
        .options({
          patterns: [
            './src/assets/global.css',
          ],
        })
        .end()
    })
  }
}

通过这种方式引入的CSS文件会在编译时全局生效。

总结

总的来说，在Vue项目中引入公共CSS文件有多种方法。具体选择哪一种方法取决于项目的需求和个人的喜好。1、在main.js文件中引入适用于整个应用范围的公共CSS，2、在App.vue文件中引入适用于根组件及其子组件，3、在vue.config.js文件中配置适用于编译时全局引入。选择合适的方法可以提高开发效率和代码的可维护性。为了更好地理解和应用这些方法，建议根据实际项目需求进行尝试和实践。

相关问答FAQs：

1. 如何在Vue项目中引入公共CSS文件？

要在Vue项目中引入公共CSS文件，你可以按照以下步骤进行操作：

步骤 1：创建公共CSS文件

首先，你需要创建一个公共CSS文件，例如 common.css，并将其放置在项目的某个目录中。在这个文件中，你可以编写你的公共样式。

步骤 2：在Vue项目中引入CSS文件

接下来，你需要在Vue项目的入口文件中引入公共CSS文件。通常，入口文件是 main.js 或 App.vue。

在入口文件中，你可以使用 import 语句将公共CSS文件导入到项目中。例如：

import './path/to/common.css';

确保替换 './path/to/common.css' 为你的公共CSS文件的实际路径。

步骤 3：使用公共CSS样式

一旦你将公共CSS文件引入到Vue项目中，你就可以在项目的任何组件中使用这些样式了。

你可以直接在组件的 <style> 标签中使用这些样式，或者通过给元素添加类名的方式应用这些样式。

例如，假设你在公共CSS文件中定义了一个类名为 common-class 的样式，你可以在组件的 <style> 标签中使用它：

<template>
  <div class="common-class">
    <!-- 组件内容 -->
  </div>
</template>

<style>
  .common-class {
    /* 使用公共CSS样式 */
  }
</style>

这样，公共CSS文件中定义的样式就会应用于该组件。

请注意，如果你使用了CSS预处理器（如Sass或Less），你可以在Vue项目中使用相应的预处理器导入公共CSS文件。

希望这个回答能帮助到你！如果你有任何其他问题，请随时提问。
2. Vue中如何全局引入公共CSS文件？

要在Vue项目中全局引入公共CSS文件，你可以按照以下步骤进行操作：

步骤 1：创建公共CSS文件

首先，你需要创建一个公共CSS文件，例如 common.css，并将其放置在项目的某个目录中。在这个文件中，你可以编写你的公共样式。

步骤 2：在Vue项目中引入CSS文件

接下来，你需要在Vue项目的入口文件中引入公共CSS文件。通常，入口文件是 main.js 或 App.vue。

在入口文件中，你可以使用 import 语句将公共CSS文件导入到项目中。例如：

import './path/to/common.css';

确保替换 './path/to/common.css' 为你的公共CSS文件的实际路径。

步骤 3：配置Vue的全局样式

为了使公共CSS样式在整个Vue项目中生效，你需要配置Vue的全局样式。

在Vue项目的入口文件中，你可以使用 Vue.mixin 方法将公共样式混入到所有组件中。例如：

import Vue from 'vue';
import './path/to/common.css';

Vue.mixin({
  mounted() {
    // 在组件挂载时应用公共样式
    this.$el.classList.add('common-class');
  },
});

确保替换 'common-class' 为你在公共CSS文件中定义的类名。

这样，公共CSS样式就会在每个组件中自动应用。

请注意，如果你使用了CSS预处理器（如Sass或Less），你可以在Vue项目中使用相应的预处理器导入公共CSS文件。

希望这个回答对你有帮助！如果你有任何其他问题，请随时提问。
3. 在Vue中如何引入公共CSS文件并且仅在特定组件中使用？

要在Vue项目中引入公共CSS文件并仅在特定组件中使用，你可以按照以下步骤进行操作：

步骤 1：创建公共CSS文件

首先，你需要创建一个公共CSS文件，例如 common.css，并将其放置在项目的某个目录中。在这个文件中，你可以编写你的公共样式。

步骤 2：在Vue组件中引入CSS文件

接下来，你需要在你希望使用公共CSS样式的Vue组件中引入CSS文件。

在组件的 <style> 标签中，你可以使用 @import 语句将公共CSS文件导入到组件中。例如：

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

<style lang="css">
  @import './path/to/common.css';

  /* 在组件中使用公共CSS样式 */
  .common-class {
    /* 样式规则 */
  }
</style>

确保替换 './path/to/common.css' 为你的公共CSS文件的实际路径。

这样，公共CSS文件中定义的样式规则就会应用于该组件。

请注意，如果你使用了CSS预处理器（如Sass或Less），你可以在组件中使用相应的预处理器导入公共CSS文件。

希望这个回答能帮助到你！如果你有任何其他问题，请随时提问。