如何在vue-cli的css-loader之后添加自定义Loader处理CSS文件？

要在css-loader之后插入自定义Loader处理CSS源码，直接通过Vue-CLI提供的chainWebpack配置即可实现，以下是具体步骤：

1. 配置vue.config.js #

在项目根目录的vue.config.js中，通过链式API找到CSS相关规则，将自定义Loader插入到css-loader之后：

module.exports = {
  chainWebpack: config => {
    // 遍历所有CSS类规则（覆盖css、scss、sass、less等预处理器场景）
    ['css', 'scss', 'sass', 'less', 'stylus'].forEach(ruleType => {
      config.module.rule(ruleType)
        .use('custom-css-webp-loader')
        // 引入自定义Loader的绝对路径，避免路径解析问题
        .loader(require.resolve('./src/loaders/custom-css-webp-loader.js'))
        // 关键：指定在css-loader之后执行
        .after('css-loader')
        .options({
          // 可传入自定义Loader的配置参数（如果你的Loader需要的话）
        })
    })
  }
}

2. 编写自定义Loader示例 #

假设你的自定义Loader用于替换background属性中的.png后缀为.webp，示例代码如下（比如放在src/loaders/custom-css-webp-loader.js）：

module.exports = function cssWebpLoader(source) {
  // 匹配background/background-image中的png url，兼容带引号、不带引号的写法
  return source.replace(
    /(background(?:-image)?\s*:\s*url\(['"]?)([^'")]+)\.png(['"]?\))/gi,
    '$1$2.webp$3'
  )
}

关键说明 #

• chainWebpack的.after('css-loader')方法会确保自定义Loader在css-loader处理完CSS源码后执行，符合Webpack Loader从右到左（配置顺序从左到右，执行顺序从右到左）的执行逻辑。
• 使用require.resolve()获取Loader的绝对路径，能避免Webpack解析本地文件时的路径错误。
• 如果只需要处理纯CSS文件（不含预处理器），可以只遍历css这一个规则类型。

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