|
7 | 7 | * [Using another template language (pug)](#using-another-template-language-pug) |
8 | 8 | * [Using another style language (stylus)](#using-another-style-language-stylus) |
9 | 9 | * [SFC style CSS variable injection (new edition)](#sfc-style-css-variable-injection-new-edition) |
| 10 | + * [import style](#import-style) |
10 | 11 | * [Minimalist Hello World example](#minimalist-hello-world-example) |
11 | 12 | * [Use `options.loadModule` hook](#use-optionsloadmodule-hook) |
12 | 13 | * [Dynamic component (using `:is` Special Attribute)](#dynamic-component-using-is-special-attribute) |
@@ -462,6 +463,67 @@ _see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_ |
462 | 463 | [:top:](#readme) |
463 | 464 |
|
464 | 465 |
|
| 466 | +## import style |
| 467 | + |
| 468 | +<!--example:source:import_style--> |
| 469 | +```html |
| 470 | +<!DOCTYPE html> |
| 471 | +<html> |
| 472 | +<body> |
| 473 | + <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script> |
| 474 | + < script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue3-sfc-loader.js"></ script> |
| 475 | + |
| 476 | + <script> |
| 477 | +
|
| 478 | + /* <!-- */ |
| 479 | + const config = { |
| 480 | + files: { |
| 481 | + '/style.css': ` |
| 482 | + .styled { color: red } |
| 483 | + `, |
| 484 | + '/main.vue': ` |
| 485 | + <template> |
| 486 | + <span class="styled">hello</span> world |
| 487 | + </template> |
| 488 | + <script> |
| 489 | + import './style.css' |
| 490 | + export default { |
| 491 | + } |
| 492 | + </script> |
| 493 | + `, |
| 494 | + } |
| 495 | + }; |
| 496 | + /* --> */ |
| 497 | +
|
| 498 | + const options = { |
| 499 | + moduleCache: { vue: Vue }, |
| 500 | + getFile: url => config.files[url], |
| 501 | + addStyle(textContent) { |
| 502 | +
|
| 503 | + const style = Object.assign(document.createElement('style'), { textContent }); |
| 504 | + const ref = document.head.getElementsByTagName('style')[0] || null; |
| 505 | + document.head.insertBefore(style, ref); |
| 506 | + }, |
| 507 | + handleModule: async function (type, getContentData, path, options) { |
| 508 | + switch (type) { |
| 509 | + case '.css': |
| 510 | + options.addStyle(await getContentData(false)); |
| 511 | + return null; |
| 512 | + } |
| 513 | + }, |
| 514 | + } |
| 515 | +
|
| 516 | + Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/main.vue', options))).mount(document.body); |
| 517 | +
|
| 518 | + </script> |
| 519 | +</body> |
| 520 | +</html> |
| 521 | +``` |
| 522 | +<!--example:target:import_style--> |
| 523 | +[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.2%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fstyle.css'%3A+%60%0A++++++++++++.styled+%7B+color%3A+red+%7D%0A++++++++%60%2C%0A++++++++'%2Fmain.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++%3Cspan+class%3D%22styled%22%3Ehello%3C%2Fspan%3E+world%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++import+'.%2Fstyle.css'%0A++++++++++++++export+default+%7B%0A++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A++++++handleModule%3A+async+function+(type%2C+getContentData%2C+path%2C+options)+%7B+%0A++++++++switch+(type)+%7B+%0A++++++++++++case+'.css'%3A%0A++++++++++++++options.addStyle(await+getContentData(false))%3B%0A++++++++++++++return+null%3B%0A++++++++%7D+%0A++++++%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:import_style--> |
| 524 | +[:top:](#readme) |
| 525 | + |
| 526 | + |
465 | 527 | ## Minimalist Hello World example |
466 | 528 |
|
467 | 529 | <!--example:source:minimalist_example--> |
|
0 commit comments