是否可以在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”？

回答

相关问题