資訊專欄INFORMATION COLUMN
摘要：前言前言本文講述開(kāi)啟模塊功能之后，如何與引用的包中樣式文件不產(chǎn)生沖突。在不做特殊處理的前提下，樣式文件將會(huì)被轉(zhuǎn)譯成。
本文講述css-loader開(kāi)啟css模塊功能之后，如何與引用的npm包中樣式文件不產(chǎn)生沖突。
比如antd-mobilenpm包的引入。在不做特殊處理的前提下，樣式文件將會(huì)被轉(zhuǎn)譯成css module。
{
test: /.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
"postcss-loader"
]
}以上代碼片段，摘自webpack配置的module.rule。
可以看出wepack在編譯過(guò)程中，遇到.css結(jié)尾的文件，都會(huì)交由postcss-loader、css-loader和style-loader依次處理。
因?yàn)?code>css-loader開(kāi)啟了css模塊功能，所以，所有經(jīng)過(guò)處理的css文件，類名都將被改變。
使用
exclude和include進(jìn)行區(qū)分
node_module文件夾內(nèi)的文件，避免被當(dāng)前rule處理{
test: /.css$/,
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}如上所示，將node_module文件夾內(nèi)的文件，用exclude排除在外，不用當(dāng)前rule進(jìn)行處理。
node_module內(nèi)的css文件{
test: /.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
}
],
include:[path.resolve(__dirname, "..", "node_modules")]
}css module模式和普通模式混用普通模式css module模式這里統(tǒng)一用 global 關(guān)鍵詞進(jìn)行識(shí)別。
// css module
{
test: new RegExp(`^(?!.*.global).*.css`),
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}
// 普通模式
{
test: new RegExp(`^(.*.global).*.css`),
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}less在使用css module時(shí)，對(duì)url的解析存在沖突，可以用resolve-url-loader進(jìn)行解決，直接上代碼：
test: /.less/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "resolve-url-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}
]
[1] Updated README regarding relative filepaths issue #121
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/2146.html
摘要：也可以和預(yù)處理器混用目前看下來(lái)，它只對(duì)名做哈希，也就是說(shuō)然而這個(gè)算是一個(gè)有意思的方式，首先它依賴于，而并不局限于的開(kāi)發(fā)，任何前端項(xiàng)目都可以使用，那么就也都可以使用的概念，不知道這個(gè)會(huì)有怎么樣的發(fā)展，感覺(jué)可以嘗試。 React的組件式開(kāi)發(fā)，讓我們可以利用其Component Model，專注于單個(gè)組件的邏輯開(kāi)發(fā)，其中還包括組織組件的樣式。先聲明，本文并不是webpack配置教程，不會(huì)介紹...
摘要：名稱后自動(dòng)自動(dòng)補(bǔ)全的功能將被移除在配置時(shí)，官方不再允許省略擴(kuò)展名，的配置寫(xiě)法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項(xiàng)傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過(guò)傳入到配置項(xiàng)中，如你會(huì)發(fā)現(xiàn)這將不會(huì)被允許，的執(zhí)行將會(huì)遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 歷時(shí)多日，webpack2.2正式版終于趕在年前發(fā)布了，此次更新相對(duì)于1.X版本有了諸多的升級(jí)優(yōu)化改進(jìn)，筆者也在第一時(shí)間查閱了官方的文檔，整理和翻譯了由w...
摘要：名稱后自動(dòng)自動(dòng)補(bǔ)全的功能將被移除在配置時(shí)，官方不再允許省略擴(kuò)展名，的配置寫(xiě)法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項(xiàng)傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過(guò)傳入到配置項(xiàng)中，如你會(huì)發(fā)現(xiàn)這將不會(huì)被允許，的執(zhí)行將會(huì)遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 從 webpack v1 遷移到 webpack v2 新特性 歡迎小伙伴們?yōu)? 前端導(dǎo)航平臺(tái) 點(diǎn)star github倉(cāng)庫(kù)： https://githu...
摘要：以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái)，而不只是一個(gè)打包工具。 以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。 如今，網(wǎng)頁(yè)不再...
閱讀 3295·2023-04-26 00:57
閱讀 608·2021-10-08 10:05
閱讀 1355·2021-09-08 09:36
閱讀 4173·2021-08-12 13:31
閱讀 2553·2019-08-30 15:55
閱讀 2244·2019-08-30 15:55
閱讀 1023·2019-08-30 15:55
閱讀 2693·2019-08-29 13:17
