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的时候，需要设置importLoadersimportLoaders: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插件]}

或者

constautoprefixer=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;}