webpack捆绑现有的css

Question

我需要将现有的css文件与webpack 2捆绑在一起。以前这些捆绑了ASP.NET MVC。当我阅读关于网络包支持的文献时，我发现你需要使用css加载器和解压缩文本插件，并且你需要从Javascript获得CSS。

我想要做的就是定义一堆CSS文件，将其捆绑在一起并缩小，而不必从Javascript文件开始。

我该怎么做？我需要使用特殊的装载机吗？

Answer 1

为什么不从index.js导入样式？

或者，你可以设置像一饮而尽一个任务运行到虽然这似乎是多余的考虑到的WebPack已经能够处理这个给你看你的风格的文件夹中。

配合提取文本插件，反正你也会得到相同的最终结果。

Answer 2

我终于做了什么就是让每个我想拥有一个js文件。

例如

• /src/content/legacy.css.js
• /src/content/main.css.js
• ...（其它旧包，我需要继续支持）

每个[name] .css.js文件只包含一些导入语句： eg

import "~/content/compact.css"; 
import "~/content/responsive.css"; 
// for the ~ character I used an alias in webpack 

然后在webpack.config文件中我指向那些css.js文件。 然后我使用css-loader，style-loader和extract-text-plugin在dist文件夹中创建一个单独的css文件。

使用自定义npm package.json脚本清理生成的js文件。

这样我就可以得到我可以再次暴露的CSS捆绑。

请注意，我的特定项目包含分布在多个应用程序的CSS，所以它不是一个内部应用程序的CSS。

我只关注以下文章： https://webpack.js.org/loaders/css-loader/