diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js index 5d039f428..9a8cfc99a 100644 --- a/lib/codegen/styleInjection.js +++ b/lib/codegen/styleInjection.js @@ -70,26 +70,31 @@ module.exports = function genStyleInjectionCode ( } } - // filter out empty styles (with no `src` specified or only contains whitespaces) - styles = styles.filter(style => style.src || nonWhitespaceRE.test(style.content)) + // empty styles: with no `src` specified or only contains whitespaces + const isNotEmptyStyle = style => style.src || nonWhitespaceRE.test(style.content) // explicit injection is needed in SSR (for critical CSS collection) // or in Shadow Mode (for injection into shadow root) // In these modes, vue-style-loader exports objects with the __inject__ // method; otherwise we simply import the styles. if (!needsExplicitInjection) { styles.forEach((style, i) => { - const request = genStyleRequest(style, i) - styleImportsCode += `import style${i} from ${request}\n` - if (style.module) genCSSModulesCode(style, request, i) + // do not generate requests for empty styles + if (isNotEmptyStyle(style)) { + const request = genStyleRequest(style, i) + styleImportsCode += `import style${i} from ${request}\n` + if (style.module) genCSSModulesCode(style, request, i) + } }) } else { styles.forEach((style, i) => { - const request = genStyleRequest(style, i) - styleInjectionCode += ( - `var style${i} = require(${request})\n` + - `if (style${i}.__inject__) style${i}.__inject__(context)\n` - ) - if (style.module) genCSSModulesCode(style, request, i) + if (isNotEmptyStyle(style)) { + const request = genStyleRequest(style, i) + styleInjectionCode += ( + `var style${i} = require(${request})\n` + + `if (style${i}.__inject__) style${i}.__inject__(context)\n` + ) + if (style.module) genCSSModulesCode(style, request, i) + } }) } diff --git a/test/fixtures/basic.vue b/test/fixtures/basic.vue index 5dce8c774..4b085fcdc 100644 --- a/test/fixtures/basic.vue +++ b/test/fixtures/basic.vue @@ -12,6 +12,11 @@ export default { } + + +