Question

在我的申请的某些方面，我希望收到＆＃34; .css＆＃34;的内容。文件包含所有＆＃34; @ import＆＃34;和＆＃34; url（）/ require（）＆＃34;处理。以前，我确信＆＃34; css-loader＆＃34;做那个变换，＆＃34; style-loader＆＃34;生成一个JavaScript代码，将生成的文本文件注入网页。但似乎我错了。文档中没有哪个地方实际上说什么＆＃34; css-loader＆＃34;返回或样式加载器作为输入。似乎＆＃34; css-loader＆＃34;不返回＆＃34;已处理的css＆＃34;，但列表列表：

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，或者它的输出是一些仅用于{{1}的内部事物或其他装载机？

Answer 1

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属性可以将类名映射到相应的本地哈希，因此您可以在代码中轻松引用它。 / p>

如果您想获得最终的css，可以致电.toString()，这会给我们输出结果：

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

是否可以使用＆＃34; css-loader＆＃34;没有＆＃34; style-loader＆＃34;在Webpack？

1 个答案: