Vue项目中如何正确引入CSS文件并处理图片路径问题详解

一、引入CSS文件的三种方式

1. 全局引入CSS文件

全局引入CSS文件适用于需要在整个项目享的样式。具体操作如下：

1. 在项目根目录的src文件夹下，新建一个styles文件夹，用于存放全局CSS文件。
2. 在main.js文件中引入全局CSS文件：

import '@/styles/reset.css'; // 引入清除默认样式的CSS文件

2. 局部引入CSS文件

局部引入CSS文件适用于只在一个组件中使用的样式。具体操作如下：

1. 在组件的<style>标签中使用@import语法引入CSS文件：

<style scoped>
@import '../../assets/iconfont/iconfont.css'; /* 相对路径引入 */
</style>

或者使用绝对路径：

<style scoped>
@import '@/styles/scroll-bar.scss'; /* 绝对路径引入 */
</style>

注意：使用@import引入样式文件时，即使加上scoped，其他未引入该文件的模块也可能访问到这些样式，导致样式污染。为了避免这种情况，可以使用以下方式：

<style src="@/styles/reset.css" scoped></style>
<style scoped>
/* 新的CSS样式 */
</style>

3. 使用<link>标签引入外部CSS文件

在某些情况下，可能需要引入外部CDN上的CSS文件，可以直接在public/index.html中使用<link>标签：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

二、处理图片路径问题

1. 将图片放在static或public文件夹

<img src="static/logo.png" alt="Logo">

2. 使用require或import引入图片

<img :src="imageUrl" alt="Logo">

data() {
  return {
    imageUrl: require('@/assets/logo.png')
  };
}

在CSS中使用：

.logo {
  background-image: url('~@/assets/logo.png');
}

3. 配置webpack处理图片路径

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

三、解决打包后CSS背景图片无法显示问题

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../' // 添加这行代码
  });
} else {
  return ['vue-style-loader'].concat(loaders);
}

这样在打包时会在CSS对应引用路径前加入../../，确保路径正确。

四、注意事项

1. 尽量使用相对路径引用：在代码中尽量使用相对路径引用资源，避免因绝对路径导致的路径问题。
2. 清除浏览器缓存：如果图片存在但仍然无法加载，可能是因为路径不正确或浏览器缓存问题。可以尝试清除浏览器缓存或在图片路径后添加查询字符串来强制刷新缓存。

五、总结