如何在 Wordpress 子主题中编译 SASS？

Question

我试图弄清楚如何在子主题中编译 SASS，但我不知道我做错了什么。

我基于jointsWP构建了一个父主题。这是父主题库的文件结构：

然后我建立了一个子主题。这是子主题库的文件结构：

在我的子主题的根目录中，我有一个 style.css 和必要的子主题 cmets：

/*
 Theme Name:   UIC
 Theme URI:    http://slamagency.com
 Description:  Child theme of the SLAM! theme for UIC.
 Author:       Megan Carroll
 Template:     slam-theme_v1
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/
/* =Theme customization starts here
-------------------------------------------------------------- */

@import url("../slam-theme_v1/css/style.css")

然后在 Library > SCSS > style.scss，我有以下代码：

@import "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700";

//
// IMPORTING STYLES
//

// Load SLAM! Theme parent SCSS.
@import url("../slam-theme_v1/scss/style.scss");

// import mixins
@import "mixins";

// import foundation overrides
@import "settings";

// import child colors
@import "colors";

编辑：澄清一下，当我在 style.scss 中添加一些内容时，它会编译为 style.css。但是，如果我对 _settings.scss 进行任何更改，什么都不会发生。我正在使用 Foundation，所以我希望能够在 _settings.scss 中编辑 Foundation 变量。我做错了什么？

编辑 2：这是我的子主题配置文件中的代码：

# 1. Set this to the root of your project when deployed:
http_path = "/"

# 2. probably don't need to touch these
css_dir = "../css"
sass_dir = "./"
images_dir = "../images"
javascripts_dir = "../js"
environment = :development
relative_assets = true


# 3. You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# 4. When you are ready to launch your WP theme comment out (3) and uncomment the line below
# output_style = :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# don't touch this
preferred_syntax = :scss

编辑 3：从父主题请求入队代码：

// loading modernizr and jquery, and reply script
if (!function_exists('slam_scripts_and_styles')) { 
function slam_scripts_and_styles() {
  global $wp_styles; // call global $wp_styles variable to add conditional wrapper around ie stylesheet the WordPress way
  if (!is_admin()) {
    $theme_version = wp_get_theme()->Version;

    // removes WP version of jQuery
    wp_deregister_script('jquery');

    // loads jQuery 2.1.0
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/bower_components/foundation/js/vendor/jquery.js', array(), '2.1.0', false );

    // modernizr (without media query polyfill)
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/bower_components/foundation/js/vendor/modernizr.js', array(), '2.5.3', false );

    // adding Foundation scripts file in the footer
    wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/bower_components/foundation/js/foundation.min.js', array( 'jquery' ), $theme_version, true );

/*
    // register main stylesheet
    wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css', array(), $theme_version, 'all' );
*/

    // register foundation icons
    wp_enqueue_style( 'foundation-icons', get_template_directory_uri() . '/library/css/icons/foundation-icons.css', array(), $theme_version, 'all' );

    // comment reply script for threaded comments
    if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
      wp_enqueue_script( 'comment-reply' );
    }

    //adding scripts file in the footer
    wp_enqueue_script( 'slam-js', get_template_directory_uri() . '/library/js/scripts.js', array( 'jquery' ), $theme_version, true );

    /*
    I recommend using a plugin to call jQuery
    using the google cdn. That way it stays cached
    and your site will load faster.
    */
    wp_enqueue_script( 'slam-js' );

  }
}
}

在父函数的前面有这样的：

// enqueue base scripts and styles
add_action('wp_enqueue_scripts', 'slam_scripts_and_styles', 999);

Answer 1

总结我们在 cmets 和聊天中的发现：

• 将整个 sass 目录复制到子主题中。然后，当您编辑变量时，所有内容都会重新编译。
• 在子主题中，不要从父主题中导入样式，因为我们现在正在子主题中重新编译。
• 由于在这种情况下在加载样式的父主题中有一个入队语句，我们需要在子主题中将该样式出列。您需要设置挂钩的优先级，以便在入队后调用出队（其优先级为 999）。

代码：

function uic_styles() { 
  wp_dequeue_style( 'slam-stylesheet' ); 
  wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css' ); 
  wp_enqueue_style( 'uic-styles', get_stylesheet_directory_uri() . '/library/css/style.css' ); 
} 
add_action( 'wp_enqueue_scripts', 'uic_styles', 1000 );

Answer 2

我的父主题中的 SCSS 文件

'主题名称/assets/scss/style.scss'

@import "base/fonts";
@import "variables/all";
@import "underscores/style";
@import "wordpress-overrides";
@import "inc/init";

我的子主题中的 SCSS 文件

'theme-name-child/assets/scss/style.scss'

/*
Theme Name:   Theme Name Child
Theme URI:    
Description:  Theme Name Child Theme
Author:       Theme Name, Co.
Author URI:   
Template:     ow
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         responsive-layout, accessibility-ready
Text Domain:  my-name-theme-child
*/


/* My Name Parent Theme Styles */
/* --------------------------- */
@import "../../../theme-name/assets/scss/style";



/* My Name Child Theme Styles */
/* -------------------------- */

/* Base */
@import "base/fonts";
@import "variables/all";
@import "base/mixins";
@import "base/base";

/* Templates */
@import "templates/template-menu";

/* Inc */
@import "inc/init";

我将 'theme-name-child/assets/scss/style.scss' 编译成 'theme-name-child/style.css'