Vue-cli中CSS导入失败求助：多种导入方式均报错

我来帮你排查这个Vue CLI中CSS导入的问题，先理清楚你的情况，再一步步给出解决方案：

问题重现 #

你在项目中遇到的CSS导入异常可以总结为：

• 仅style标签使用根路径别名的方式可行：<style src="@/assets/css/base.css">
• 以下三种方式均报错：
  1. 相对路径的style标签导入：<style src="./assets/css/base.css">（提示依赖未找到）
  2. CSS内的@import '@/assets/css/base.css'（模块构建失败，找不到文件）
  3. CSS内的@import './assets/css/base.css'（同样提示找不到文件）

对应的报错信息示例：

This dependency was not found:

• !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./assets/css/base.css in ./src/components/HelloWorld.vue
  To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./assets/css/base.css

Module build failed: Error: Failed to find '@/assets/css/base.css'
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-312 13:3-17:5 14:22-320

可能的原因 #

1. 相对路径计算错误：你的组件HelloWorld.vue在src/components/目录下，使用./assets/css/base.css会指向src/components/assets/css/base.css，但实际你的CSS文件在src/assets/css/，路径不匹配导致报错。
2. CSS loader未配置别名解析：webpack默认只会在JS文件中解析@别名，CSS文件中的@import语句如果使用@，需要单独给css-loader配置别名规则。
3. webpack缓存干扰：旧的缓存可能导致路径解析逻辑异常，需要清除缓存后重启服务。

分步解决方案 #

1. 修正相对路径（解决style标签相对路径导入问题） #

把相对路径从./assets/css/base.css改成../assets/css/base.css，因为../会从components目录回到src根目录，正确指向src/assets/css/base.css：

<style src="../assets/css/base.css">
</style>

2. 配置css-loader支持@别名（解决@import导入问题） #

如果需要在CSS的@import中使用@别名，需要在vue.config.js中给css-loader添加别名解析配置。针对Vue CLI 3+版本，操作如下：

在项目根目录创建或修改vue.config.js，添加以下代码：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 确保@别名指向src目录（Vue CLI默认已配置，但这里显式声明更稳妥）
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'));

    // 给css-loader配置别名解析，让@import能识别@路径
    config.module.rule('css')
      .use('css-loader')
      .tap(options => {
        options.resolve = options.resolve || {};
        options.resolve.alias = { '@': path.resolve(__dirname, 'src') };
        return options;
      });
  }
};

配置完成后，重启开发服务器，此时@import '@/assets/css/base.css'就能正常解析了。

3. 清除webpack缓存并重启服务 #

如果修改配置后还是报错，可能是webpack缓存的问题，执行以下步骤：

1. 停止当前的npm run serve服务
2. 删除项目根目录下的node_modules/.cache文件夹
3. 重新启动npm run serve

4. 验证别名配置是否正确 #

如果还是有问题，可以验证webpack的别名配置是否生效：
在项目根目录运行命令：

vue inspect > webpack.config.js

打开生成的webpack.config.js文件，搜索resolve.alias，确认@是否指向src目录，比如：

resolve: {
  alias: {
    '@': '/your-project-path/src'
  }
}

如果别名配置不正确，需要检查是否有其他自定义配置覆盖了默认的别名设置。

内容的提问来源于stack exchange，提问作者Abner Wang