无法在 Webpack 4 for Wordpress 中使用 MiniCssExtractPlugin 加载样式

Question

我正在使用 Webpack 4 进行 Wordpress 主题开发。 我已经将 webpack.config.js 配置为从 js 文件中提取 css 并将它们加载到单独的文件中。 但是样式没有被加载，无论是作为单独的 css 文件还是作为单独的 css 文件。 webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  context: __dirname,
  entry: {
    userSide: "./js/public.js",
    adminSide: "./js/admin.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  mode: "development",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "dist/images",
              name: "[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css"
    })
  ]
};

每当我运行npm run dev但未显示网站中的更改时，都会在本地目录中创建 css 文件。 请帮忙

Answer 1

这就是我配置 webpack 的方式

你可以使用我的设置看看它是否适合你

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

添加到插件部分：

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),

和规则部分

{
   "test":"/\\.scss$/",
   "use":[
      "style-loader",
      "MiniCssExtractPlugin.loader",
      {
         "loader":"css-loader",
         "options":{
            "minimize":true,
            "sourceMap":true
         }
      },
      {
         "loader":"sass-loader"
      }
   ]
},

此外，您可能需要使用 HTML Webpack插件将 css 注入您的 html