@import 和 link 的区别

  1. link 在载入页面的同时,加载css样式。而@import在页面载入完成后才加载css
  2. link的兼容性比@import要好
  3. @import只能导入样式文件,link不仅可以同href导入样式,还可以定义rel属性(规定当前文档与被链接文档之间的关系)。

    loader原理,css-loader与style-loader

    1.css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
    2.style-loader 的作用是把样式插入到 DOM中,方法是在head中插入一个style标签,并把样式写入到这个标签的 innerHTML里

    loader的原理

    loader能把源文件翻译成新的结果,一个文件可以链式经过多个loader编译。以处理scss文件为例:
  • sass-loader把scss转成css
  • css-loader找出css中的依赖,压缩资源
  • style-loader把css转换成脚本加载的JavaScript代码