首页vue2如何在页面或组件中引用asset文件下的公共style样式不加scope的情况下不会样式不会影响到其它的页面

vue2如何在页面或组件中引用asset文件下的公共style样式不加scope的情况下不会样式不会影响到其它的页面

时间: 2024-10-09 16:10:34 浏览: 48

在 Vue2 中引入 asset 文件夹下的公共 CSS 样式并确保其不加 `scoped`（作用域）影响其他页面或组件，你可以按照以下步骤操作： 1. **在项目中组织结构**：将公共样式文件（如 `common.css`）放在 `src/assets/styles` 或者其他适合你的静态资源目录下。 2. **使用 `<link>` 标签**：在需要应用公共样式的地方（通常是全局的 `app.vue` 或 `main.js`），使用 `<link>` 标签直接链接到该样式文件： ```html <template>  </template> <script> import axios from 'axios'; import 'src/assets/styles/common.css'; // 这里导入公共CSS export default { // ... } </script> ``` 3. **Vue 组件内引用**：如果你需要在某个特定组件内部使用而不想影响全局，可以在组件的 `<head>` 部分使用： ```html <template> <div>  </div> </template> <script> import { defineComponent } from "vue"; import './styles/my-component-styles.css'; // 组件内的样式 export default defineComponent({ // ... }); </script> ``` 4. **确保样式作用范围**：由于默认情况下 Vue 的单文件组件模板 (`<template>`) 和样式 (`<style>` 和 ` scoped="scoped"` )会被编译成同一个块（block），所以在组件内部的样式会自动加上 `scoped` 作用域。如果要覆盖这个默认行为，可以手动移除 `scoped` 或将其设为 `false`。记住，为了全局生效且不带作用域，最好是在根组件或者其他不依赖 `v-if`, `v-for`, 或者自定义指令等条件的区域导入样式。

阅读全文