我如何使用带有下划线主题的 scss

Question

我一直在寻找如何在使用 _sassify 下载的 Underscore 主题中使用 SCSS。

当我打开文件夹并看到 style.css 和带有 scss 文件的文件夹时，主题使用 css 但我想更改并使用 scss 文件。 我不明白如何使用它。

使用scss的流程是怎样的？有人可以帮我弄这个吗？

谢谢

Answer 1

您需要按照此页面上的步骤https://github.com/Automattic/_s

设置

要开始使用 _s 附带的所有工具，您需要安装必要的 Node.js 和 Composer 依赖项：

$ composer install
$ npm install

可用的 CLI 命令 _s 包含为 WordPress 主题开发量身定制的 CLI 命令：

• composer lint:wpcs ：根据 PHP 编码标准检查所有 PHP 文件。
• composer lint:php : 检查所有 PHP 文件的语法错误。
• composer make-pot：在languages/目录下生成一个.pot文件。
• npm run compile:css : 将 SASS 文件编译为 css。
• npm run compile:rtl : 生成 RTL 样式表。
• npm run watch : 监视所有 SASS 文件并在它们发生变化时将它们重新编译为 css。
• npm run lint:scss ：根据 CSS 编码标准检查所有 SASS 文件。
• npm run lint:js ：根据 JavaScript 编码标准检查所有 JavaScript 文件。
• npm run bundle：生成一个 .zip 存档以供分发，不包括开发和系统文件。

Answer 2

我花了几天时间如何将带有 scss 文件的下划线主题中的样式更改为 css 文件。早些时候我使用 Gulp，所以我想创建可以工作的 gulpfile。我用 Gulp 创建了普通文件，起初它不起作用——它在 cmd 中工作，但在 Wordpress 上没有任何改变。但是在添加了一个插件 WP-SCSS 之后，它终于可以工作了！非常感谢乔纳森的回答并帮助我找到this plugin。也许它会对某人有所帮助，所以下面我添加了 gulpfile 中的代码。

// gulpfile.js
var gulp = require("gulp"),
    sass = require("gulp-sass"),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    sourcemaps = require("gulp-sourcemaps");

function style() {
    return (
        gulp
            .src(paths.source.src)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.source.dest))
    );
}

// $ gulp style
exports.style = style;

var paths = {
    source: {
        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "sass/**/*.scss",
        // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "."
    }
};

function watch() {
    gulp.watch("sass/**/*.scss", style);
}
    
// $ gulp watch
exports.watch = watch

Answer 3

您必须使用preprocessor 将 scss 编译为 css。主题使用css，这不会改变。您在 scss 中进行更改 - 然后 scss 编译为 css。预处理器可以是 IDE 的一部分，您可以使用 Koala、Scout、Prepros 等程序，也可以使用 sass 命令行。

您应该从这里开始阅读： http://sass-lang.com

尝试在 http://sass-lang.com/guide 的帮助下在测试目录中编译您的第一个 .scss 文件：

sass input.scss output.css

然后开始调整_s。

Answer 4

我不确定 Underscore 主题，但我过去使用过 this plugin，我真的很喜欢它。它让您可以将 SCSS 与任何主题一起使用，并自动为您编译文件。