scss WP管理页面的自定义样式

Posted 2021-05-17

### Create the scss file
I'm assuming the file is theme_name/assets/scss/WP-admin-styles.scss

### In gulpfile.js
* add a task:
```js
gulp.task('wp-admin-css', function () {
  return gulp.src(config.assetPath + "/scss/WP-admin-styles.scss")
    .pipe(sassGlob())
    //.pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    //.pipe(sourcemaps.write())
  .pipe(autoprefixer())
    .pipe(gulp.dest(config.distPath + "/css"));
});
```

* in the watch task add a line:
```js
  gulp.watch(config.assetPath + "/scss/WP-admin-styles.scss", ['wp-admin-css']);
  ```

### In register_assets.php
* add the code:
```php
function load_custom_wp_admin_style(){
 wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/dist/css/WP-admin-styles.css', false, '1.0.0' );
  wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');
```

.acf-internal-external-link {
  .acf-fields {
    display: flex;
    flex-wrap: wrap;

    [data-name="link_text"] {
      flex: 100% 0 0;
    }

    [data-name="link_type"] {
      flex: 10em 1 0;
    }

    [data-name="link_external_url"],
    [data-name="link_internal_page"] {
      flex: auto 1 1;
    }
  }
}