diff --git a/lib/helpers.js b/lib/helpers.js index 2367acea7..0a8d08bb3 100644 --- a/lib/helpers.js +++ b/lib/helpers.js @@ -95,7 +95,7 @@ function resolveLoaders ( const templateCompilerOptions = '?' + JSON.stringify({ - id: moduleId, + id: hasScoped ? moduleId : undefined, hasScoped, hasComment, optionsId, @@ -310,7 +310,7 @@ module.exports = function createHelpers ( // a marker for vue-style-loader to know that this is an import from a vue file optionsId, vue: true, - id: moduleId, + id: scoped ? moduleId : undefined, scoped: !!scoped, sourceMap: needCssSourceMap }) + diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue new file mode 100644 index 000000000..6ae3d7173 --- /dev/null +++ b/test/fixtures/style-import-twice-sub.vue @@ -0,0 +1,3 @@ + + + diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue new file mode 100644 index 000000000..1459b47e0 --- /dev/null +++ b/test/fixtures/style-import-twice.vue @@ -0,0 +1,9 @@ + + + + diff --git a/test/test.js b/test/test.js index 377c3b0c9..aff24e89d 100644 --- a/test/test.js +++ b/test/test.js @@ -121,6 +121,19 @@ function interopDefault (module) { : module } +function initStylesForAllSubComponents (module) { + if (module.components) { + for (const name in module.components) { + const sub = module.components[name] + const instance = {} + if (sub && sub.beforeCreate) { + sub.beforeCreate.forEach(hook => hook.call(instance)) + } + initStylesForAllSubComponents(sub) + } + } +} + describe('vue-loader', () => { it('basic', done => { test({ @@ -256,6 +269,23 @@ describe('vue-loader', () => { }) }) + it('style import for a same file twice', done => { + test({ + entry: 'style-import-twice.vue' + }, (window, module) => { + initStylesForAllSubComponents(module) + const styles = window.document.querySelectorAll('style') + expect(styles.length).to.equal(3) + expect(styles[0].textContent).to.contain('h1 { color: red;\n}') + // import with scoped + const id = 'data-v-' + genId('style-import-twice.vue') + expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green;\n}') + const id2 = 'data-v-' + genId('style-import-twice-sub.vue') + expect(styles[2].textContent).to.contain('h1[' + id2 + '] { color: green;\n}') + done() + }) + }) + it('template import', done => { test({ entry: 'template-import.vue'