如何在Wordpress子主题中编译SASS?
我试图找出如何在子主题中编译SASS,但我不知道我做错了什么 我基于jointsWP构建了一个父主题。以下是父主题库的文件结构:如何在Wordpress子主题中编译SASS?,wordpress,sass,Wordpress,Sass,我试图找出如何在子主题中编译SASS,但我不知道我做错了什么 我基于jointsWP构建了一个父主题。以下是父主题库的文件结构: // 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
// 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' );
}
}
}
然后我建立了一个儿童主题。以下是子主题库的文件结构:
在我的子主题的根目录中,我有一个带有必要子主题注释的style.css:
/*
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.scs进行任何更改,都不会发生任何事情。我在使用基金会,所以我希望能够编辑在StayStuts.SCSS中的基础变量。我做错了什么
编辑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);
从我们的评论和聊天中总结我们的发现:
- 将整个sass目录复制到子主题中。然后,当您编辑变量时,所有内容都会重新编译
- 在子主题中,不要从父主题导入样式,因为我们现在正在子主题中重新编译
- 因为在本例中,加载样式的父主题中有一个enqueue语句,所以我们需要在子主题中将该样式出列。您需要设置钩子的优先级,以便在排队(优先级为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 );
父主题中的SCSS文件 '主题名称/assets/scss/style.scss'
@import "base/fonts";
@import "variables/all";
@import "underscores/style";
@import "wordpress-overrides";
@import "inc/init";
/*
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";
“我的孩子”主题中的SCSS文件
'主题名称子项/assets/scss/style.scss'
@import "base/fonts";
@import "variables/all";
@import "underscores/style";
@import "wordpress-overrides";
@import "inc/init";
/*
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";
我将主题名child/assets/scss/style.scss'编译为主题名child/style.css'我们需要知道您是如何触发SASS编译的。您是在运行“sass-watch”、“compass-watch”、使用grunt还是使用JetBrains的文件监视程序(PyCharm/PHPStorm/RubyMine/etc)或其他方法?这些方法中的每一种都有一种方法,可以指定要监视哪些文件的更改。请发布该方法的配置。例如,对于compass,这就是你的config.rb文件。对不起,我以为我在那里写了,但我想我没有。我使用来编译。好的,使用scout,它会为您设置config.rb文件(这样您就不用担心了)。但是,你介意发布它吗?@manishie请参阅上面的配置代码。我应该提到,当我在_settings.scss中编写新样式时,它确实会显示在style.css中。但是,当我尝试更改任何现有变量时,style.css中什么也没有发生。我猜这是因为我没有正确地从父主题加载基础样式,所以当我改变一个变量并重新编译时,这个主题在任何地方都看不到把新的变量放进去。但我无法理解如何从父主题加载基础样式…是否意味着将整个SASS目录复制到子主题中?