vue components @import css

not support css3 @import

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


  1. @charset "UTf-8";
  2. /**
  3. *
  4. * @author xgqfrms
  5. * @license MIT
  6. * @copyright xgqfrms
  7. *
  8. * @description links.css
  9. *
  10. */
  11. a {
  12. text-decoration: none;
  13. color: #0f0;
  14. }

  1. <style>
  2. @import "./links.css";
  3. /* global css*/
  4. a {
  5. text-decoration: none;
  6. }
  7. </style>
  8. <style scoped lang="scss">
  9. /* local css */
  10. </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">


  1. <style src="./links.css">
  2. /* global css*/
  3. a {
  4. text-decoration: none;
  5. }
  6. </style>
  7. <style scoped lang="scss">
  8. /* local css */
  9. </style>

css in js


  1. <script>
  2. // css in js
  3. import "./links.css";
  4. export default {
  5. name: 'links',
  6. }
  7. </script>
  8. <style>
  9. /* @import "./links.css"; */
  10. /* global css */
  11. a {
  12. text-decoration: none;
  13. }
  14. </style>
  15. <style scoped lang="scss">
  16. /* local css */
  17. </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

vue components & `@import css` bug的更多相关文章

  1. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  2. vue & components & props & methods & callback

    vue & components & props & methods & callback demo solution 1 & props & data ...

  3. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  4. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  5. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  6. IE下css bug集合-翻译自haslayout.net

    概述IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 本页列举了IE下的一些问题,实例样本和一些我们已知的解决方法. 尽管我已经尽力按照它们本来的性质对它们进行分 ...

  7. vue使用import来引入组件的注意事项

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...

  8. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  9. vue中的css作用域、vue中的scoped坑点

    一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...

随机推荐

  1. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  2. easyui基于 layui.laydate日期扩展组件

    本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...

  3. 基于Xtrabackup恢复单个innodb表

      Preface       We all know that Xtrabackup is a backup tool of percona for innodb or Xtradb.It's us ...

  4. v-cloak

    v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

  5. kali安装ssh服务

    一. kali安装ssh服务 1.修改源 root@DGG:~# vi /etc/apt/sources.list deb http://http.kali.org/kali kali-rolling ...

  6. Linux系统崩溃,数据迁移

    就在1小时前,处理了件如标题所述的麻烦事儿.吃完午饭,想对此作个总结,一来自己梳理下过程以便后面遇见类似的事可以 快速处理,二来同行的小伙伴们可以探讨下.故事是这样的,公司所在园区物业晚上断电8小时, ...

  7. PHP siege 压测 QPS大小

    1.使用 PHP-FPM SOCKET的形式通讯 2.配置 PHP-FPM配置 [root@bogon php-fpm.d]# ls -al 总用量 drwxr-xr-x. root root 8月 ...

  8. py2exe安装使用

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...

  9. 关于ZYNQ-700是否支持大容量SD卡汇报

    关于ZYNQ-700是否支持大容量SD卡 不支持. 下午问了客服的FAE给的答案是不清楚,我自己调研了一下为什么. 调查结果: 1. 大容量的SD卡为什么不支持? SD2.0规范中(SDHC)硬件支持 ...

  10. C语言数组篇(四)二维数组

      二维数组声明: ][] ={{,,},{,,}; //两行 三列         二维数组在声明的时候可以不写行,但一定要写列 ] = {{,},{,,},{}}; //未声明的地方自动补零 二维 ...