Compile custom WordPress style.min.css from scss source files

[display-posts taxonomy=”category” tax_term=”current” posts_per_page=”200″]

It may be beneficial to dequeue the default WordPress Gutenberg block styles.min.css and compile your own from the source scss files.

The WordPress blocks css files is located here,
wp-includes/css/dist/block-library/style.min.css

The WordPress blocks source files are located here,
https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library

npm install the source files,
npm install @wordpress/base-styles --save-dev
npm install @wordpress/block-library --save-dev

Remove Gutenberg Block Library CSS from loading on the frontend. Add to function.php

//Remove Gutenberg Block Library CSS from loading on the frontend
function sd_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );

} 
add_action( 'wp_enqueue_scripts', 'sd_remove_wp_block_library_css', 100 );

@import scss files

// mixins, vars, etc..
@import "~@wordpress/base-styles/_mixins.scss";

@import "~@wordpress/base-styles/breakpoints";

@import "~@wordpress/base-styles/variables";

// style src
@import "~@wordpress/block-library/src/style";

You may need to replace ~ with path to scss files. e.g. ../../node_modules/@wordpress/base-styles/
Comment out the imports within @wordpress/block-library/src/_style.scss that are not required.


Posted

in