feat: resolve plugin 中过滤对 css 文件添加query，避免后续相关loader无法读取正确文件

didi · Nov 26, 2024 · 9b87c84 · 9b87c84
1 parent a1adb25
commit 9b87c84
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/webpack-plugin/lib/resolver/AddEnvPlugin.js b/packages/webpack-plugin/lib/resolver/AddEnvPlugin.js
@@ -4,6 +4,7 @@ const parseQuery = require('loader-utils').parseQuery
 const addInfix = require('../utils/add-infix')
 const { matchCondition } = require('../utils/match-condition')
 const { JSON_JS_EXT } = require('../utils/const')
+const isCSSFileName = require('../utils/is-css-file-name')
 
 module.exports = class AddEnvPlugin {
   constructor (source, env, fileConditionRules, target) {
@@ -34,7 +35,8 @@ module.exports = class AddEnvPlugin {
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
-      obj.query = stringifyQuery(queryObj)
+      // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
+      if (!isCSSFileName(extname)) obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)
       resolver.doResolve(target, Object.assign({}, request, obj), 'add env: ' + env, resolveContext, callback)

diff --git a/packages/webpack-plugin/lib/resolver/AddModePlugin.js b/packages/webpack-plugin/lib/resolver/AddModePlugin.js
@@ -4,6 +4,7 @@ const parseQuery = require('loader-utils').parseQuery
 const { matchCondition } = require('../utils/match-condition')
 const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
+const isCSSFileName = require('../utils/is-css-file-name')
 
 module.exports = class AddModePlugin {
   constructor (source, mode, options, target) {
@@ -37,13 +38,19 @@ module.exports = class AddModePlugin {
       const queryInfix = queryObj.infix
       if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
-      obj.query = stringifyQuery(queryObj)
+      // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
+      if (!isCSSFileName(extname)) {
+        obj.query = stringifyQuery(queryObj)
+      }
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`
-          obj.query = stringifyQuery(queryObj)
+          // css | stylus | less | sass 中 import file 过滤query，避免在对应的 loader 中无法读取到文件
+          if (!isCSSFileName(extname)) {
+            obj.query = stringifyQuery(queryObj)
+          }
           obj.path = addInfix(resourcePath, defaultMode, extname)
           resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {
             callback(err, result)

diff --git a/packages/webpack-plugin/lib/utils/is-css-file-name.js b/packages/webpack-plugin/lib/utils/is-css-file-name.js
@@ -0,0 +1,5 @@
+const CSS_LANG_EXT_ARR = ['.less', '.styl', '.sass', '.scss', '.less', '.css']
+
+module.exports = function isCSSFileName (extname) {
+  return CSS_LANG_EXT_ARR.includes(extname)
+}