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

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