資訊專欄INFORMATION COLUMN
摘要：前言前言本文講述開啟模塊功能之后，如何與引用的包中樣式文件不產(chǎn)生沖突。在不做特殊處理的前提下，樣式文件將會被轉(zhuǎn)譯成。
本文講述css-loader開啟css模塊功能之后，如何與引用的npm包中樣式文件不產(chǎn)生沖突。
比如antd-mobilenpm包的引入。在不做特殊處理的前提下，樣式文件將會被轉(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在編譯過程中，遇到.css結(jié)尾的文件，都會交由postcss-loader、css-loader和style-loader依次處理。
因為css-loader開啟了css模塊功能，所以，所有經(jīng)過處理的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)行識別。
// 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時，對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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2146.html
摘要：也可以和預(yù)處理器混用目前看下來，它只對名做哈希，也就是說然而這個算是一個有意思的方式，首先它依賴于，而并不局限于的開發(fā)，任何前端項目都可以使用，那么就也都可以使用的概念，不知道這個會有怎么樣的發(fā)展，感覺可以嘗試。 React的組件式開發(fā)，讓我們可以利用其Component Model，專注于單個組件的邏輯開發(fā)，其中還包括組織組件的樣式。先聲明，本文并不是webpack配置教程，不會介紹...
摘要：名稱后自動自動補全的功能將被移除在配置時，官方不再允許省略擴展名，的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過傳入到配置項中，如你會發(fā)現(xiàn)這將不會被允許，的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 歷時多日，webpack2.2正式版終于趕在年前發(fā)布了，此次更新相對于1.X版本有了諸多的升級優(yōu)化改進(jìn)，筆者也在第一時間查閱了官方的文檔，整理和翻譯了由w...
摘要：名稱后自動自動補全的功能將被移除在配置時，官方不再允許省略擴展名，的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過傳入到配置項中，如你會發(fā)現(xiàn)這將不會被允許，的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 從 webpack v1 遷移到 webpack v2 新特性 歡迎小伙伴們?yōu)? 前端導(dǎo)航平臺 點star github倉庫： https://githu...
摘要：以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。強大的設(shè)計使得它更像是一個構(gòu)建平臺，而不只是一個打包工具。 以前一直對前端構(gòu)建工具的理解不深，經(jīng)過幾天的研究特意來總結(jié)一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請指出。 如今，網(wǎng)頁不再...
閱讀 3300·2023-04-26 00:57
閱讀 616·2021-10-08 10:05
閱讀 1357·2021-09-08 09:36
閱讀 4178·2021-08-12 13:31
閱讀 2555·2019-08-30 15:55
閱讀 2248·2019-08-30 15:55
閱讀 1025·2019-08-30 15:55
閱讀 2694·2019-08-29 13:17
