xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

vue components `@import css` bug All In One

vue components @import css bug All In One

not support css3 @import

https://github.com/vuejs/vue-loader/issues/138#issuecomment-436847816

image


@charset "UTf-8";

/**
 * 
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * 
 * @description links.css
 * 
 */

a {
    text-decoration: none;
    color: #0f0;
}


<style>
    @import "./links.css";
    /* global css*/ 
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

solutions

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns
https://forum.vuejs.org/t/help-imported-css-styles-conflict-between-components/5687/4

<style src="./links.css">


<style src="./links.css">
    /* global css*/ 
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

image

css in js


<script>
    // css in js
    import "./links.css";
    export default {
        name: 'links',
    }
</script>

<style>
    /* @import "./links.css"; */
    /* global css */
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

image


$ style src

what fuck tricks ???

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
https://www.w3.org/TR/html401/present/styles.html
https://www.w3schools.com/TAGs/tag_style.asp
https://www.w3schools.com/TAGs/ref_standardattributes.asp

refs



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @ 2018-11-08 10:25  xgqfrms  阅读(373)  评论(6编辑  收藏  举报