webpack的CSS加載器

Jioby 發布于2019-08-23 11:54 / 1386人閱讀

摘要：目的就是讓頁面可以在每個瀏覽器上正常運行。是一個的處理平臺可以幫實現更多的功能。用法安裝配置文件在中引入插件或者添加對的支持。還提供了另外的方法來聲明全局變量，即在里進行配置。

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中,以形式在html頁面中插入css代碼

options

insertAt: 插入位置
insertInto: 插入到指定的dom
singleton: true or false，多個樣式是否只生成一個標簽

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

GPU云服務器云服務器 js css 加載器 js css加載器 webpack按需加載加載css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97645.html

前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

KevinYan 2019-08-01 14:56 評論0 收藏0
webpack初探

摘要：我們還想要的顏色我們通過下面命令行可以做到觀察模式我們不想每一次項目變化都要手動編譯可以緩存兩次編譯之間沒有變化的模塊和輸出文件。開發服務器使用開發服務器開發體驗會更好這將在本地啟動一個端口的服務，指向靜態文件以及自動編譯。原文英文版來自webpack官網 demo代碼本文地址歡迎瀏覽這是一篇通過一個小例子給你介紹webpack的文章你可以通過這篇文章了解到：如...

soasme 2019-08-19 17:12 評論0 收藏0
webpack初探

摘要：我們還想要的顏色我們通過下面命令行可以做到觀察模式我們不想每一次項目變化都要手動編譯可以緩存兩次編譯之間沒有變化的模塊和輸出文件。開發服務器使用開發服務器開發體驗會更好這將在本地啟動一個端口的服務，指向靜態文件以及自動編譯。原文英文版來自webpack官網 demo代碼本文地址歡迎瀏覽這是一篇通過一個小例子給你介紹webpack的文章你可以通過這篇文章了解到：如...

Lavender 2019-08-28 18:27 評論0 收藏0