国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack的CSS加載器

Jioby / 1399人閱讀

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

webpack中常用的加載器 css-loader 處理css中路徑引用等問(wèn)題

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

options

alias: 解析別名
importLoaders(@import): 在css-loader前應(yīng)用的loader的數(shù)目，默認(rèn)為0
Minimize: true or false 是否開(kāi)啟css代碼壓縮，比如壓縮空格不換行
modules: 是否開(kāi)啟css-module

module.exports = {
  ...
  module: {
    rules: [{
      test: /.css$/,
      use: ["style-loader", {
        loader: "css-loader",
        options: {//當(dāng)css文件中又引用了其他的css的時(shí)候，需要設(shè)置importLoaders
          importLoaders: 1
        }
      }]
    }]
  }
};
style-loader 動(dòng)態(tài)把樣式寫(xiě)入css

加載的css作為style標(biāo)簽內(nèi)容插入到html中,以形式在html頁(yè)面中插入css代碼

options

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

postcss-loader

postcss-loader：為了瀏覽器的兼容性，有時(shí)候我們必須加上-webkitm, -ms, -moz等前綴。目的就是讓頁(yè)面可以在每個(gè)瀏覽器上正常運(yùn)行。postcss是一個(gè)CSS的處理平臺(tái)可以幫CSS實(shí)現(xiàn)更多的功能。
用法：
安裝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

添加對(duì)webpack的LESS支持。當(dāng)遇到less文件時(shí)，先交給less-loader處理，然后交給css-loader，最后交由style-loader處理，然后執(zhí)行webpack打包

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

要啟用CSS的source map，你需要將sourceMap選項(xiàng)傳遞給less-loader和css-loader

CSS SourceMap信息文件，里面存儲(chǔ)著位置信息。隨著代碼增多，我們會(huì)對(duì)代碼進(jìn)行壓縮，代碼壓縮之后進(jìn)行調(diào)bug定位會(huì)非常困難，于是引入sourceMap記錄壓縮前后的位置信息，當(dāng)產(chǎn)生錯(cuò)誤時(shí)直接定位到未壓縮前的位置，方便調(diào)試。簡(jiǎn)單來(lái)說(shuō)就是記錄壓縮的翻譯文件，通過(guò)這個(gè)文件可以找到你的對(duì)應(yīng)源碼

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

less-loader可用的options:
modifyVars 或 globalVars聲明全局變量: {Object}，在less使用全局變量時(shí)，我們可以定義一個(gè)全局變量的文件，然后每次使用時(shí)都引用這個(gè)文件，顯而易見(jiàn)，這個(gè)方法很麻煩。less還提供了另外的方法來(lái)聲明全局變量，即在options.globalVars/options.modifyVars里進(jìn)行配置。

modifyVars修改全局的less變量, globalVars聲明全局的less變量
module.exports = {
  ...
  module: {
    test: /.less$/,
    use: [
      "style-loader",
      "css-loader,
      {
        loader: "less-loader",
        options: {
          midifyVars: {
            @bgColor: red; //或者bgColor: red,有沒(méi)有@都可以
          }
          /*globalVars: {
            @bgColor: red;
          }*/
        }
      }
    ]
  }
};
body {
  background-color: @bgColor;//使用時(shí)必須有@
}

編譯后

body {
  background-color: red;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97645.html

相關(guān)文章

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

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

    roadtogeek 評(píng)論0 收藏0

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

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

    LeexMuller 評(píng)論0 收藏0

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

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

    KevinYan 評(píng)論0 收藏0

  • webpack初探

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

    soasme 評(píng)論0 收藏0

  • webpack初探

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

    Lavender 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<