estilos Wordpress em editor só funciona com "relógio"

votos
0

Eu estou usando Wordpress 5.4 com o editor de Gutenberg e Webpack 4.2 para construir ativos. Eu quero que meus estilos ( app.css) a ser carregado durante a edição de uma página ou post.

Em functions.php , acrescentei:

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

Sempre que eu corro yarn watchtudo funciona como esperado, meus estilos são carregados no editor. No entanto, se eu executar yarn buildpara gerar arquivos de compilação minified, ele não funciona! Mesmo que o arquivo minified é gerado com sucesso no mesmo local com o mesmo nome, não importa. O que poderia dar errado?

Em caso de ajuda, aqui é 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
  }
}

E 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 14/01/2020 em 00:00
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Eu acho que a função deve ser algo como isto. A documentação diz que o estilo é na pasta de modelo de raiz, então você deve usarget_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');

Aqui está o meu exemplo Wordpress, consulte devDependencies

Respondeu 14/01/2020 em 05:48
fonte usuário

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