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

vue components @import css

not support css3 @import

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

@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>

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>

---

$ 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