webpack的CSS加載器

webpack中經常使用的加載器

css-loader 處理css中路徑引用等問題

用於在js中加載css，解釋@import和url()

options

alias: 解析別名
importLoaders(@import): 在css-loader前應用的loader的數目，默認爲0
Minimize: true or false 是否開啓css代碼壓縮，好比壓縮空格不換行
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

insertAt: 插入位置
insertInto: 插入到指定的dom
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;
}