如何使用 webpack 加载 CSS 文件答案

【问题标题】：How to load CSS files with webpack如何使用 webpack 加载 CSS 文件
【发布时间】：2020-11-04 22:56:06
【问题描述】：

我试图在构建时将 src 文件夹中的 CSS 文件复制到 dist 文件夹中 - 我目前在我的 dist 中使用 HTML 文件 - 即我没有使用 javascript 文件，因此不希望将样式创建为 javascript。我只需要将文件复制到 dist 中。这是我当前不起作用的配置。

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    devServer:{
      port:8000
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
              test: /\.css$/i,
              use: [ 'style-loader','css-loader'],
            },
            {
              test: /\.(png|jpe?g|gif|glb|gltf|typeface.json)$/i,
              loader: 'file-loader',
              options: {
                  publicPath: './',
                  name: '[name].[ext]'
              },
          },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

然后我使用链接标签将 css 添加到 index.html 文件中，例如

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

但这只是将 javascript 添加到它在 dist 中构建的 HTML 文件中。

我该怎么做？

***编辑：我尝试添加 CSS 文件而不将它们合并到我的 Javascript 文件中

【问题讨论】：

你需要使用style-loader和css-loader作为一个模块
我正在使用这两个 - 检查我的帖子
对不起，我误解了你的问题。请查看此链接stackoverflow.com/questions/54237119/…
这似乎是关于 HTML 而不是 CSS。也许我的问题措辞不当
youtu.be/eddzBlXBl3Y 在视频结尾处 Brad 从包中提取 css 文件。对不起，我在外面，没时间在这里写作为回答

标签： javascript html css webpack

【解决方案1】：

您可以尝试使用MiniCssExtractPlugin。如文档中所述：

此插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持按需加载 CSS 和 SourceMaps。

要使用它，你可以先安装它，导入它，在你的 webpack 配置中添加一个加载器和一个插件。这是一个例子（不要忘记注意顺序必须正确）：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/i,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
      },
      ...
    ],
  },
  plugins: [
    ...
    new MiniCssExtractPlugin(),
  ],
};

它还会在 index.html 结果中为您的 css 文件添加一个自动链接标签。

【讨论】：