编辑器中的 Wordpress 样式仅适用于“手表”答案

【问题标题】：Wordpress styles in editor only works with "watch"编辑器中的 Wordpress 样式仅适用于“手表”
【发布时间】：2020-01-13 21:00:16
【问题描述】：

我正在使用 Wordpress 5.4 和 Gutenberg 编辑器 和 Webpack 4.2 来构建资产。我希望在编辑页面或帖子时加载我的样式 (app.css)。

在functions.php中，我添加了：

function add_theme_style_to_editor(){
    add_theme_support( 'editor-styles' );
    add_editor_style( 'public/build/app.css' );
}
add_action( 'after_setup_theme', 'add_theme_style_to_editor' );

每当我运行yarn watch 时，一切都会按预期运行，我的样式就会加载到编辑器中。但是，如果我运行yarn build 来生成缩小的构建文件，它就不起作用！即使缩小文件在同一个地方成功生成同名，也没关系。 可能出了什么问题？

编辑：当我从文件app.scss 中删除@import "~bootstrap/scss/bootstrap"; 行并删除所有与引导程序相关的样式时，其他样式在构建文件时确实有效。我仍然不明白为什么在运行yarn watch 时一切正常。

Edit2: 如果我在 functions.php 中使用以下内容，它可以使用引导程序和所有内容。只是现在整个后端都受到影响，而不仅仅是编辑器：

function add_theme_style(){
    wp_enqueue_style( 'these-style', get_theme_file_uri( 'public/build/app.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'add_theme_style' );

发生了什么事？

如果有帮助，这里是 package.json：

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "watch": "webpack --watch",
    "build": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.8.3",
    "popper.js": "^1.16.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.1"
  }
}

还有webpack.config.js：

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

module.exports = {
    entry: {
        app: "./assets/app.js" // this also contains an scss-import that will result in app.css, apart from app.js
    },
    output: {
        path: path.resolve(__dirname, "public/build"),
        filename: "[name].js",
        publicPath: "public/build"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {presets: ["es2015"]}
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

【问题讨论】：

如果你使用 vscode 我推荐这个插件versionlens。您有旧的 devDependencies，例如babel-core 应该是 @babel/core etc。 yarn build 是否在控制台中显示任何错误？ public/build/中是否出现app.css文件，或者打开页面是不是控制台报错？

标签： php wordpress webpack

【解决方案1】：

我认为函数应该看起来像这样。 documentation 表示样式在根模板文件夹中，所以你应该使用get_template_directory_uri

function add_theme_style_to_editor() {
  add_theme_support('editor-styles');
  add_editor_style(get_template_directory_uri() . 'public/build/app.css');
}
add_action('after_setup_theme', 'add_theme_style_to_editor');

这是我的 Wordpress 示例，请参阅 devDependencies

【讨论】：