ce4c83ff
 wxy
初始提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var loaderUtils = require('loader-utils')
var path = require('path')
var hash = require('hash-sum')
var qs = require('querystring')
module.exports = function () {}
module.exports.pitch = function (remainingRequest) {
var isServer = this.target === 'node'
var isProduction = this.minimize || process.env.NODE_ENV === 'production'
var addStylesClientPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesClient.js'))
var addStylesServerPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesServer.js'))
var addStylesShadowPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesShadow.js'))
var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
var relPath = path.relative(__dirname, this.resourcePath).replace(/\\/g, '/')
var id = JSON.stringify(hash(request + relPath))
var options = loaderUtils.getOptions(this) || {}
// direct css import from js --> direct, or manually call `styles.__inject__(ssrContext)` with `manualInject` option
// css import from vue file --> component lifecycle linked
// style embedded in vue file --> component lifecycle linked
var isVue = (
/"vue":true/.test(remainingRequest) ||
options.manualInject ||
qs.parse(this.resourceQuery.slice(1)).vue != null
)
var shared = [
'// style-loader: Adds some css to the DOM by adding a <style> tag',
'',
'// load the styles',
'var content = require(' + request + ');',
// content list format is [id, css, media, sourceMap]
"if(typeof content === 'string') content = [[module.id, content, '']];",
'if(content.locals) module.exports = content.locals;'
]
// shadowMode is enabled in vue-cli with vue build --target web-component.
// exposes the same __inject__ method like SSR
if (options.shadowMode) {
return shared.concat([
'// add CSS to Shadow Root',
'var add = require(' + addStylesShadowPath + ').default',
'module.exports.__inject__ = function (shadowRoot) {',
' add(' + id + ', content, shadowRoot)',
'};'
]).join('\n')
} else if (!isServer) {
// on the client: dynamic inject + hot-reload
var code = [
'// add the styles to the DOM',
'var add = require(' + addStylesClientPath + ').default',
'var update = add(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
]
if (!isProduction) {
code = code.concat([
'// Hot Module Replacement',
'if(module.hot) {',
' // When the styles change, update the <style> tags',
' if(!content.locals) {',
' module.hot.accept(' + request + ', function() {',
' var newContent = require(' + request + ');',
" if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
' update(newContent);',
' });',
' }',
' // When the module is disposed, remove the <style> tags',
' module.hot.dispose(function() { update(); });',
'}'
])
}
return shared.concat(code).join('\n')
} else {
// on the server: attach to Vue SSR context
if (isVue) {
// inside *.vue file: expose a function so it can be called in
// component's lifecycle hooks
return shared.concat([
'// add CSS to SSR context',
'var add = require(' + addStylesServerPath + ').default',
'module.exports.__inject__ = function (context) {',
' add(' + id + ', content, ' + isProduction + ', context)',
'};'
]).join('\n')
} else {
// normal import
return shared.concat([
'require(' + addStylesServerPath + ').default(' + id + ', content, ' + isProduction + ')'
]).join('\n')
}
}
}
|
