Wordpress styles dans l'éditeur fonctionne uniquement avec « montre »

voix
0

J'utilise Wordpress 5.4 avec l' éditeur Gutenberg et Webpack 4.2 pour construire des actifs. Je veux que mes styles ( app.css) à charger lors de la modification d' une page ou par courrier.

En functions.php , j'ai ajouté:

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

Chaque fois que je lance yarn watchtout fonctionne comme prévu, mes styles sont chargés dans l'éditeur. Cependant, si je cours yarn buildpour générer des fichiers de construction minified, il ne fonctionne pas! Même si le fichier minified est généré avec succès au même endroit avec le même nom, il n'a pas d' importance. Que pourrait - on ne va pas?

Dans le cas où il aide, voici 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
  }
}

Et 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
        })
    ]
}
Créé 13/01/2020 à 22:00
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Je pense que la fonction devrait ressembler à quelque chose comme ça. La documentation indique que le style est dans le dossier de modèle de racine, vous devez donc utiliserget_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');

Voici mon exemple Wordpress, voir devDependencies

Créé 14/01/2020 à 03:48
source utilisateur

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