Please Update "Small Limitations" to Include Incompatibility with @imports
davidhmays opened this issue · comments
Thank you, done.
@import
ed files with css-variables aren't working
https://jsbin.com/teziyibijo/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script>
window.MSInputMethodContext && document.documentMode &&
document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');
</script>
<style>
@import 'https://vit-1.github.io/iAMcss-samples/v3/iam-select/iam-select.css';
:root {
--check-var: orange;
}
[iam-main-h], [vue-header-h] {
color: var(--check-var);
}
[vue-header-h] {
color: var(--iam-select-c-2nd-back);
}
</style>
</head>
<body iam-main iam-themes="simple-colors">
<div id="VueApp">
<my-header>This text should be replaced</my-header>
<my-header-too>This text should be replaced</my-header-too>
</div>
<h1 iam-main-h>Outside VueApp</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
var MyHeader = {
template:'<h1 vue-header-h>Inside VueApp</h1>'
};
var MyHeaderToo = {
template:'<h2 vue-header-too>Inside VueApp too</h2>'
};
new Vue({
el:'#VueApp',
components: {
'my-header': MyHeader,
'my-header-too': MyHeaderToo
}
});
</script>
</body>
</html>