Wordpress стили в редакторе работает только с «часами»

голоса
0

Я использую Wordpress 5.4 с редактором Гутенберга и 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чтобы генерировать уменьшенные файлы сборка, он не работает! Даже при том , что уменьшенная файл создается успешно в том же месте с тем же именем, это не имеет значения. Что может быть неправильно?

В случае , если это помогает, вот 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
        })
    ]
}
Задан 13/01/2020 в 22:00
источник пользователем
На других языках...                            


1 ответов

голоса
0

Я думаю , что функция должна выглядеть следующим образом . Документация говорит о том , что стиль в корневой папке шаблона, так что вы должны использовать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

Ответил 14/01/2020 в 03:48
источник пользователем

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