Невозможно загрузить стили с помощью MiniCssExtractPlugin в Webpack 4 для Wordpress

Question

Я использую Webpack 4 для разработки темы Wordpress. Я настроил свой webpack.config. js для извлечения css из js файлов и загрузки их в отдельные файлы. Но стили не загружаются как отдельный файл 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"
    })
  ]
};

Файлы css создаются в локальном каталоге каждый раз, когда я запускаю npm run dev, но не отображают изменения на веб-сайте. Пожалуйста, помогите

Answer 1

Так я настраиваю свой веб-пакет

Вы можете использовать мои настройки, чтобы увидеть, работает ли он для вас

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"
      }
   ]
},

Также вам может потребоваться ввести css в html с помощью HTML Webpack плагин