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'