Webpack 配置不会从 SCSS/LESS 创建 CSS 文件

Question

我正在使用以下 WordPress 启动插件，并实现了完整的工作 Vue 配置： https://github.com/tareq1988/vue-wp-starter

这个插件一般工作。 但似乎有一个 Webpack 问题负责生成一些 css 文件。

这是 Webpack 配置：

const webpack = require("webpack");
const path = require("path");
const package = require("./package.json");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const config = require("./config.json");

const devMode = process.env.NODE_ENV !== "production";

// Naming and path settings
var appName = "app";
var entryPoint = {
  frontend: "./src/frontend/main.js",
  admin: "./src/admin/main.js",
  style: ['./assets/less/style.less', './assets/scss/style.scss'],
};

var exportPath = path.resolve(__dirname, "./assets/js");

// Enviroment flag
var plugins = [];

// extract css into its own file
plugins.push(
  new MiniCssExtractPlugin({
    filename: "../css/[name].css",
    ignoreOrder: true
  })
);

plugins.push(
  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: false,
    __VUE_PROD_DEVTOOLS__: false,
  }),
)

// enable live reload with browser-sync
// set your WordPress site URL in config.json
// file and uncomment the snippet below.
// --------------------------------------
// plugins.push(new BrowserSyncPlugin( {
//   proxy: {
//     target: config.proxyURL
//   },
//   files: [
//     '**/*.php'
//   ],
//   cors: true,
//   reloadDelay: 0
// } ));

plugins.push(new VueLoaderPlugin());

// Differ settings based on production flag
if (devMode) {
  appName = "[name].js";
} else {
  appName = "[name].min.js";
}

module.exports = {
  entry: entryPoint,
  mode: devMode ? "development" : "production",
  output: {
    path: exportPath,
    filename: appName,
  },

  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm-bundler.js",
      "@": path.resolve("./src/"),
      frontend: path.resolve("./src/frontend/"),
      admin: path.resolve("./src/admin/"),
    },
    modules: [
      path.resolve("./node_modules"),
      path.resolve(path.join(__dirname, "src/")),
    ],
  },

  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\\/]node_modules[\\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

  plugins,

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', "css-loader", "less-loader"],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: "url-loader",
            options: {
              mimetype: "image/png",
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: "file-loader",
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + "/";
              },
              hmr: process.env.NODE_ENV === "development",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

这是相关部分的文件夹结构：

使用npm run dev我没有收到任何错误消息。 但我希望文件/assets/css/admin.css和/assets/css/frontend.css会自动创建。 这就是开发人员在这里所说的：

路径也包含在 WordPress 的相关 PHP 文件中（includes/Assets.php）：

所以我收到以下 404 错误：

....plugin-root/assets/css/admin.css?ver=0.1.0 net::ERR_ABORTED 404 (Not Found)

简短的详细描述：此入门插件的配置器应生成两个缺少的 css 文件。 这可能是什么原因？ 我错过了什么吗？