webpack 不包含 css 文件答案

【问题标题】：webpack does not include css filewebpack 不包含 css 文件
【发布时间】：2019-06-14 00:56:38
【问题描述】：

我已经构建了一个 react-stepper 并将其上传到 github。当我想构建我的应用程序时，webpack 不包含 font-awesome css。但它包括我自己的 style.scss 文件。我在 webpack 中使用样式加载器。在开发模式下一切正常。只有在构建模式下它不起作用。这是我的仓库：

https://github.com/tkwant/react-stepper-wizard

这是我的 webpack.build.config 文件：

const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"]
  },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "react-stepper-wizard.js",
    library: "Stepper",
    libraryTarget: "umd"
  },
  externals: ["react", "react-dom", "font-awesome"],
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new webpack.HotModuleReplacementPlugin()
  ],
  devtool: "source-map",
  devServer: {
    contentBase: "./examples",
    hot: true,
    port: 9001
  }
};

如果有人可以在这里帮助我或者可以做一个 PR 来解决这个问题，那就太好了。

【问题讨论】：

它不应该在externals 中。那是为了从包中排除模块。
当我从外部移除它时它也不起作用

标签： javascript css reactjs webpack

【解决方案1】：

您正在复制.css 文件，对吗？你可能想试试webpack-copy-plugin

【讨论】：

你能解释一下如何使用它吗？我不明白为什么我的 scss 文件被加载但 css 文件没有。我已经以同样的方式在 stepper.js 中导入了它
README.md 文件相当广泛地涵盖了它的使用。您只需将其加载到 Webpack 插件中并按照要复制的文件的配置进行操作
好的，我会试试的。但是为什么加载scss文件而css不加载仍然有点混乱......

【解决方案2】：

解决方案是使用 url 加载器。

 { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

【讨论】：