Angular 15迁移后Swiper样式解析错误及Webpack配置问题

问题本质 #

Swiper 8.4.7预编译的swiper.min.css中包含未处理的Sass变量（以@开头），而Angular 15默认的CSS加载器无法解析这类Sass语法，导致编译报错；修改node_modules文件会在npm i后被覆盖，自定义Webpack配置的方向可行，但报错path is not defined是因为配置文件未引入Node.js的path模块。

方案1：直接引入Swiper源码样式（推荐，无需修改Webpack） #

放弃引入预编译的swiper.min.css，改用Swiper提供的未编译Sass源码文件，Angular构建工具可直接解析：

• 在项目全局样式文件（如src/styles.scss）中添加：

  // 引入核心样式
  @import 'swiper/scss';
  // 按需引入额外模块样式（比如导航、分页）
  @import 'swiper/scss/navigation';
  @import 'swiper/scss/pagination';
  

方案2：修复自定义Webpack配置 #

自定义Webpack的思路正确，只需补全path模块引入并配置正确的加载规则：

1. 在项目根目录的webpack.config.js开头添加path模块引入：

   const path = require('path');
   

2. 配置加载规则处理Swiper的CSS文件：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           include: path.resolve(__dirname, 'node_modules/swiper'),
           use: ['style-loader', 'css-loader', 'sass-loader']
         }
       ]
     }
   };
   

3. 确保angular.json中构建配置已切换为自定义Webpack builder：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有其他配置
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 保留原有其他配置
     }
   }
   

4. 重新执行ng build或ng serve即可。

方案3：用patch-package永久修改Swiper文件 #

如果不想调整样式引入或Webpack配置，可通过补丁工具永久修改Swiper的CSS文件：

1. 安装依赖：

   npm install patch-package --save-dev
   

2. 修改node_modules/swiper/swiper.min.css中导致报错的@开头代码（比如将Sass变量替换为具体值）
3. 生成补丁文件：

   npx patch-package swiper
   

4. 在package.json的scripts中添加自动补丁脚本：

   "scripts": {
     "postinstall": "patch-package"
   }
   

   此后每次执行npm i，补丁会自动应用。

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