使用webpack打包CSS

Question

我是新手，正在使用webpack打包一个aurelia网站应用程序。它可以打包HTML，并将所有图像放入dist文件夹中，这样就可以正常运行而不出错。

现在，我想以同样的方式打包CSS。我期望CSS会像图片一样被移动到“dist”文件夹中。

然而，当我运行构建时，webpack似乎没有处理CSS。与图片不同，没有关于发现CSS的消息。

这就是我期望webpack处理的内容：

<link href="../css/main.css" rel="stylesheet">

我做错了些什么吗？

const path = require("path");
const {AureliaPlugin} = require("aurelia-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: { main: "aurelia-bootstrapper" },

  ///dev
  devtool: 'source-map',

  ///Prod
  //devtool: 'source-map',

  output: {
    path: path.join(__dirname, "wwwroot", "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  },

  resolve: {
    extensions: [".js"],
    modules: ["App", "node_modules"],    
  },

  module: {
    rules: [
        { test: /\.html$/i, loaders: "html-loader" },
        { test: /\.css$/, loader: "style-loader!css-loader" },      {
          test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader", options: {
              name: './images/[name].[hash].[ext]',
          }
        }
     ]
  },

  plugins: [
      new AureliaPlugin()
  ]
};

- Greg Gum

---

默认情况下，Webpack会将CSS作为Javascript标签内联，将CSS注入页面中。这听起来很奇怪，但它允许您在开发中进行热重载。在生产中，您可以使用ExtractTextPlugin将它们提取到文件中，并使用普通的链接标签进行引用。不，这不是设计良好的软件。 - Andy Ray

我很乐意在行内看到它，但这没发生。也许我的配置有问题？ - Greg Gum

你还需要在你的Javascript代码中使用require()来引入CSS文件，这样webpack才能找到它们。 - Andy Ray

成功了，谢谢。 - Greg Gum

（垃圾邮件）也许建议阅读http://blog.andrewray.me/webpack-when-to-use-and-why/。 - Andy Ray

Answer 1

默认情况下，css将嵌入到您的app.js中。如果您想要将它们分开，请使用css-loader并结合ExtractTextPlugin：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
    rules: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin("styles.css")
]

请注意在您的HTML文件中引用添加的CSS：

还要注意在您的HTML文件中引用添加的CSS：

   <link rel="stylesheet" href="/dist/styles.css">

https://github.com/webpack-contrib/extract-text-webpack-plugin

- Ain

---

我不想将它们分离到另一个文件中。问题在于它们没有嵌入到app.js中。当处理HTML时，css-loader应该将其嵌入到app.js中，但是当我搜索时，在其中找不到它。它应该看到链接，然后从那里嵌入它，对吗？ - Greg Gum

如果您在Webpack处理的任何JS文件中导入/需要CSS文件，则应将其嵌入到app.js JavaScript eval函数中... - Ain