webpack - 常用的 CSS 加载器(webpack与其常见loader加载器使用方式)

css-loader 处理css中路径引用等问题

用于在js中加载css,解释@import和url()

options

  1. alias: 解析别名
  2. importLoaders(@import): 在css-loader前应用的loader的数目,默认为0
  3. Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行
  4. modules: 是否开启css-module
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders
          importLoaders: 1
        }
      }]
    }]
  }
};

style-loader 动态把样式写入css

加载的css作为style标签内容插入到html中,以<style></style>形式在html页面中插入css代码

options

  1. insertAt: 插入位置
  2. insertInto: 插入到指定的dom
  3. singleton: true or false,多个样式是否只生成一个<style></style>标签

postcss-loader

postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。

用法:

安装 postcss: npm install postcss-loader autoprefixer

配置文件

webpack.config.js:
module: {
  rules: [{
    test: /\.css$/
    loader: 'style-loader!css-loader!postcss-loader'
  }]
}
postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')//在postcss-loader中引入autoprefixer插件
  ]
}

或者

const autoprefixer = require('autoprefixer');
module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', {
      loader: 'postcss-loader',
      options: {
        plugins() {
          return [autoprefixer];
        }
      }
    }]
  }]
}

less-style

添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包

module: {
  rules: [{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
  }]
}

要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader

CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', {
        loader: 'less-loader',
        options: {
          sourceMap: true
        }
      }]
    }]
  }
};

less-loader可用的options:
modifyVars 或 globalVars声明全局变量: {Object},在less使用全局变量时,我们可以定义一个全局变量的文件,然后每次使用时都引用这个文件,显而易见,这个方法很麻烦。less还提供了另外的方法来声明全局变量,即在options.globalVars/options.modifyVars里进行配置。

modifyVars修改全局的less变量, globalVars声明全局的less变量

module.exports = {
  ...
  module: {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader,
      {
        loader: 'less-loader',
        options: {
          midifyVars: {
            @bgColor: red; //或者bgColor: red,有没有@都可以
          }
          /*globalVars: {
            @bgColor: red;
          }*/
        }
      }
    ]
  }
};
body {
  background-color: @bgColor;//使用时必须有@
}

编译后

body {
  background-color: red;
}
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值