是否可以在Webpack中使用「css-loader」而不使用「style-loader」？

在我的應用程序的某些地方，我想要處理所有「@import」和「url（）/ require（）」的「.css」文件的內容。以前，我確信「css-loader」會進行這種轉換，「style-loader」會生成一個JavaScript代碼，將生成的文本文件注入到網頁中。但似乎我都錯了。什麼「css-loader」返回或什麼樣式加載器作爲輸入的文檔中沒有地方。它似乎是「CSS加載器」返回不「處理CSS」，但列出的清單：是否可以在Webpack中使用「css-loader」而不使用「style-loader」？

webpack.config.js

module.exports = { 
    target: 'node', 
    entry: './foo.js', 
    output: {path: '.', filename: '_foo.js'}, 
    module: {loaders: [{test: /\.css/, loader: 'css-loader'}]} 
};

foo.js

console.log(require('./bar.css'));

bar.css

.bar { color: red; }

殼

$ webpack && node _foo.js 
[ [ 0, '.bar {\n color: red;\n}\n\n', '' ], 
    toString: [Function: toString], 
    i: [Function] ]

所以，問題：是否有可能從css-loader得到實際的後處理CSS，或者它的輸出是一些內部的東西，僅僅是爲了一個style-loader或其他使用裝載機？

來源

2017-02-28 grigoryvp

css-loader返回處理後的CSS。從我可以告訴它的輸出是一個處理模塊的數組：[module.id, processedCss, '']。在你的例子中，沒有什麼可以處理的，所以它沒有改變。因此，讓我們來看看這需要一些處理的例子：

爲了便於說明，我們啓用CSS模塊，因此所有的類都將與當地的哈希值代替：

{ 
    test: /\.css/, 
    use: [{ loader: "css-loader", options: { modules: true } }] 
}

bar.css

@import './imported.css'; 
body { color: green; } 
.bar { color: red; }

imported.css

html { font-size: 16px; }

現在有一個@import需要處理，也.bar將被替換爲散列。這個輸出是：

[ [ 2, 'html { font-size: 16px; }\n', '' ], 
    [ 1, 
    'body { color: green; }\n._3mnMnh-NK57laCui8ulcdG { color: red; }\n', 
    '' ], 
    toString: [Function: toString], 
    i: [Function], 
    locals: { bar: '_3mnMnh-NK57laCui8ulcdG' } ]

這兩個文件已處理的單獨的模塊，並且你可以看到有一個映射類名到相應的本地哈希locals屬性，所以你可以很容易地引用它在你的代碼中。

如果您想獲得剛剛產生的CSS，你可以調用.toString()，這給了我們這樣的輸出：

html { font-size: 16px; } 
body { color: green; } 
._3mnMnh-NK57laCui8ulcdG { color: red; }

來源

2017-02-28 10:10:27

是否可以在Webpack中使用「css-loader」而不使用「style-loader」？

回答

相關問題