Webpack中的css-loader 和style-loader

時間 2019-11-11

標籤 webpack css loader style 欄目 CSS 简体版

原文原文鏈接

傳統上咱們會在html文件中引入CSS代碼，藉助webpack style-loader和css-loader咱們能夠在.js文件中引入css文件並讓樣式生效。css

style-loader和css-loader做用是不一樣的。html

css-loader: 加載.css文件
style-loader:使用<style>將css-loader內部樣式注入到咱們的HTML頁面

css-loader 和style-loader 的options選項node

css-loader optionswebpack

alias: 解析別名
importLoader(@import)
Minimize: true or false,是否開啓css代碼壓縮，好比壓縮空格不換行。
modules：是否開啓css-modules

style-loader && style-loader optionsweb

style-loader分類npm

style-loader:配合css-loader使用，以<style></style>形式在html頁面中插入css代碼瀏覽器
style-loader/url：以link標籤形式向html頁面中插入代碼，採用這種方式須要將css-loader變爲file-loader,但這種方式不推薦，由於若是在一個js文件中引入多個css文件會生成多個link標籤，而html每一個link標籤都會發送一次網絡請求，因此這種方式並不建議。sass
style-loader/useable: 採起這種方式使用處理css，會有use( )和unuse（）l兩種方法，use（）開啓引入樣式，unuse（)不適用樣式。網絡

options選項app

-attrs: 添加自定義 attrs 到 style 標籤
- insertAt:插入位置
- insertInto: 插入到指定dom
- singleton:類型爲布爾值，多個樣式是否只生成一個<style></style>標籤。

transform:根據給定邏輯在css插入html前選擇指定樣式（具體可參考下面實例）

準備工做
新建文件夾並安裝相應loader
當前文件夾下執行 npm init
執行 npm install style-loader css-loader --save-dev
執行npm install file-loader--save-dev(後面須要用到)
文件結構

demo 01：在js文件中引入css，查看打包後的效果。

 1 /*webpack.config.js*/
 2 var path = require('path')
 3 module.exports = {
 4   entry: {
 5     app: './app.js'
 6   },
 7   output: {
 8     path: path.resolve(__dirname, './dist'),
 9     publicPath: './dist/',
10     filename: '[name].bundle.js',
11     chunkFilename: '[name].chunk.js'
12   },
13   module: {
14     rules: [
15       {
16         test: /\.css$/,
17         use:[
18           {
19             loader: 'style-loader'
20           },
21           {
22             loader: 'css-loader'
23           }
24         ]
25       }
26     ]
27   }
28 }

app.js

/*app.js*/
import base from './src/css/base.css'

base.css

/*base.css*/
html {
  background: #808080
}

這是一個最簡單的例子，咱們在入口文件app.js中引入base.css。配置文件中針對.css文件應用了css-loader,style-loader,注意這裏loader的順序不能顛倒，webpack是自下而上解析的，只有經過css-loader處理css後才能經過style-loader生成<style></style>標籤。
將打包後的app.bundle.js文件引入html能夠看到背景變爲灰色，而且生成了的<style></style>標籤插入到<head></head>中

在base.css中新增樣式

 1 ```
 2 /*base.css*/
 3 html {
 4   background: #808080
 5 }
 6 
 7 p {    /*新增*/
 8   font-size: 40px
 9 }
10 ```

在common.css中增長樣式並在app.js中導入import common.css from './src/css/common.css'

1 /*common.css*/
2 html {
3   color: red
4 }

打包後能夠看到引入的每一個css文件都對應生成了一個<style></style>標籤。

接下來咱們將配置文件中的style-loader變成style-loader/url,這時css-loader須要替代爲file-loader.打包後在控制檯能夠看到html中引入了兩個<link></link> 標籤。

demo 02: 使用style-loader/useable

使用style-loader/useable，需配合css-loader(不是file-loader)。

common.css

1 // common.css
2 html {
3   background: red
4 }

base.css

1 // base.css
2 html {
3   background: #808080
4 }

app.js

 1 import base from './src/css/base.css'
 2 import common from './src/css/common.css'
 3 
 4 let bgFlag = true
 5 document.onclick = function toggleBgColor() {
 6   if (bgFlag) {
 7     base.use()
 8     common.unuse()
 9   } else {
10     common.use()
11     base.unuse()
12   }
13   bgFlag = !bgFlag
14 }

打包後，在瀏覽器中點擊頁面能夠切換頁面的背景顏色，使用style-loader/url配合css-loader也是生成<style></style>標籤，可是若是使用file-loader也能打包，可是在style標籤中引入的是打包後的css chunks，並不能生效。
初始頁面

點擊一次，bgFlag === true,base.css生效，背景色爲灰色。

在點擊一次 bgFlag === false, 應用common.css，背景色爲紅色。

將css-loader變爲file-loader,能夠發現點擊頁面能夠標籤裏的打包後的css chunks，可是這樣是沒法生效的。

demo 03 使用options選項。

attrs: attrs是一個對象，以鍵值對出現，在<style></style>標籤中以key=value出現，鍵值對能夠自定義，可是使用時建議語義化。

1 //style-loader添加options選項
2 {
3     loader: 'style-laoder',
4     options: {
5         attrs: {  //attrs是一個對象，以鍵值對出現，建議語義化
6             first: '1'
7         }
8     }
9 }

能夠看到base.css和common.css對應的兩個<style></style> 標籤都被添加了first = "1"

接下來咱們給style-loader的options增長singleton屬性,IE9對頁面上style標籤數量有嚴格限制，因此這個屬性仍是頗有用的。

 1 // webpack.config.js
 2 use:[
 3           {
 4             loader: 'style-loader',
 5             options: {
 6               attrs: {
 7                 first: 1
 8               },
 9               singleton: true
10             }
11           },
12           {
13             loader: 'css-loader'
14 
15           }
16         ]

能夠看到，此時只有一個標籤插入到文檔中。common.css和base.css模塊的樣式被合併到一個樣式標籤中。

。

上面提到options選項還有insertAt屬性，insertAt有兩個值top | bottom,若是不配置insertAt則默認爲bottom，當insertAt： ‘top’ 時，loader打包的css將優先已經存在的css，insertInto插入到指定標籤。

在html頁面中添加新的樣式

 1 <head>
 2   <meta charset="UTF-8">
 3   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 5   <title>demo 01</title>
 6   <style>
 7     html {  //背景色設置爲紅色
 8       background: red
 9     }
10   </style>
11 </head>

而後insertAt: ‘top’打包後能夠發現webpack打包加載生成的標籤會在標籤的上方。背景色會被覆蓋爲紅色。
。

在html中新建<div id="app"></div> 標籤，利用insertInto將打包的css插入到該div中。

demo 04 options中的transform

1 options: {
2     transform: './src/transform.js' //值對應一個js文件
3 }

transform.js中導入一個函數，函數的參數是css，這時咱們拿到的css樣式是以字符串的形式，因此可用repalce方法修改樣式，transform.js能夠經過style-loader會根據須要在css未加載到頁面以前修改樣式，在函數中咱們能夠獲取到瀏覽器的相關信息，好比window,navigator等，這有助於咱們根據相關信息修改樣式。在這個例子中，咱們判斷window的innerWidth當小於476px時，將字體由24px變爲12px。當瀏覽器寬大於476px時加載進來的css 文本大小爲24px。

 1 // transform.js
 2 module.exports = function(css) {
 3   console.log(css)
 4   console.log(window.innerWidth)
 5 
 6   if (window.innerWidth < 476) {
 7     return  css.replace('24', '12')
 8   } 
 9   return css
10 }

css-loader options

css-loader

less和sass

1 npm install less-loader less --save-dev
2 npm install sass-loader node-sass --save-dev

提取css

1 extract-loader
2 ExtractTextWebpackPlugin

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。