Wordpress stijlen in editor werkt alleen met "watch"

stemmen
0

Ik gebruik Wordpress 5.4 met de Gutenberg-editor en Webpack 4.2 om activa te bouwen. Ik wil dat mijn stijlen ( app.css) worden geladen bij het bewerken van een pagina of post.

In functions.php , voegde ik eraan toe:

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

Wanneer ik run yarn watchalles werkt zoals verwacht, mijn stijlen geladen in de editor. Echter, als ik loop yarn buildnaar minified build bestanden te genereren, het werkt niet! Hoewel de minified bestand met succes wordt gegenereerd in dezelfde plaats met dezelfde naam, het maakt niet uit. Wat kan er mis gaan?

In het geval dat het helpt, hier is 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
  }
}

En 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
        })
    ]
}
De vraag is gesteld op 14/01/2020 om 00:00
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

Ik denk dat de functie moet er ongeveer zo uitzien. De documentatie zegt dat de stijl is in de hoofdmap sjabloon, zodat u moet gebruikenget_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 is mijn Wordpress zie bijvoorbeeld devDependencies

antwoordde op 14/01/2020 om 05:48
bron van user

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