Wordpress Stile im Editor funktioniert nur mit „watch“

stimmen
0

Ich bin mit Wordpress 5.4 mit dem Gutenberg - Editor und Webpack 4.2 zu Vermögen aufzubauen. Ich möchte meine Styles ( app.css) geladen werden , wenn eine Seite oder per Post zu bearbeiten.

In functions.php , fügte ich hinzu:

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' );

Jedes Mal , wenn ich laufe yarn watchalles funktioniert wie erwartet, sind meine Stile in den Editor geladen. Allerdings, wenn ich laufe yarn buildminimierten Build - Dateien zu generieren, funktioniert es nicht! Auch wenn die verkleinerte Datei erfolgreich an der gleichen Stelle mit dem gleichen Namen erzeugt wird, spielt es keine Rolle. Was könnte schief gehen werden?

Im Fall hilft es, hier ist 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
  }
}

Und 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
        })
    ]
}
Veröffentlicht am 14/01/2020 um 00:00
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Ich denke , die Funktion wie folgt aussehen sollte. Die Dokumentation sagt , dass der Stil im Stammvorlagenordner, so dass Sie verwenden sollen ,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');

Hier ist mein Wordpress Beispiel, siehe devDependencies

Beantwortet am 14/01/2020 um 05:48
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more