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

【问题标题】：Unable to load styles using MiniCssExtractPlugin in Webpack 4 for Wordpress无法在 Webpack 4 for Wordpress 中使用 MiniCssExtractPlugin 加载样式
【发布时间】：2020-02-29 22:44:04
【问题描述】：

我正在使用 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 文件，但不会显示网站中的更改。请帮忙

【问题讨论】：

标签： javascript css wordpress webpack sass

【解决方案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 plugin 将 css 注入到您的 html 中

【讨论】：