estilos de Wordpress en el editor sólo funciona con "reloj"

votos
0

Estoy usando Wordpress 5.4 con el editor de Gutenberg y webpack 4.2 para obtener bienes. Quiero que mis estilos ( app.css) que se cargarán al editar una página o post.

En functions.php , añadí:

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

Cada vez que corro yarn watchtodo funciona como se esperaba, mis estilos son cargados en el editor. Sin embargo, si corro yarn buildpara generar ficheros de construcción miniaturizada, que no funciona! A pesar de que el archivo minified se genera con éxito en el mismo lugar con el mismo nombre, no importa. ¿Qué podría ir mal?

En caso de que ayuda, aquí es 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
  }
}

Y 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
        })
    ]
}
Publicado el 13/01/2020 a las 22:00
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Creo que la función debe ser algo como esto. La documentación dice que el estilo está en la carpeta de plantillas de raíz, por lo que debe utilizarget_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');

Aquí está mi ejemplo Wordpress, ver devDependencies

Respondida el 14/01/2020 a las 03:48
fuente por usuario

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