css - Sass 中的命令行参数为 var，用于编译时硬编码的 CDN URL

Question

对于本地 HTML/Sass/Css 开发，我们使用 libsass(通过 Grunt)将 Sass 文件编译为 Css。 CSS 背景图像 URL 是相对于根的。

萨斯

$dir-img: /img;

.header {
    background-image: url(#{$dir-img}/header.jpg);
}

我们希望在为生产服务器进行编译时更改 URL 以使用 CDN:

background-image: url(http://media.website.com/img/header.jpg);

是否有一些解决方案可以将命令行参数传递给 Sass，以便 Sass 可以使用 Sass @IF 将根相对 URL 切换为硬编码的 CDN(如 URL)。像这样的东西:

命令行:

grunt sass:dist --cdnurl="http://media.website.com/img/"

萨斯

然后 Sass 检查是否给出了命令行参数:

@if using CDN {
    $dir-img: cdnurl;
@else {
    $dir-img: /img;
}

然后所有 IMG 网址都将使用 CDN 网址。

Answer 1

我在 libass 命令行选项上找不到任何东西来传递所述变量。到萨斯。

但最终想出了我自己的工作版本! 让 Grunt 编写 Sass 配置部分。

如果您已经使用 Grunt 和 Sass，那么实际上非常简单。我们已经在我们的临时(测试)服务器上安装了 NodeJS 和 Grunt-cli。

Sass 设置

在 Sass 中，我们已经使用了一个(更大的)Sass 配置文件，其中包含一些变量，例如:

_config.scss

$dir-font: '/assets/assets/fonts';
$dir-htc: '/assets/htc';
$dir-img: '/assets/images';

此配置文件包含更多配置设置，但我已经更新了这些变量。在此配置文件中:

@import "_sourcepaths";
$dir-font: '/assets/fonts' !default;
$dir-htc: '/assets/htc' !default;
$dir-img: '/assets/images' !default;

请注意 _sourcepaths.scss 的 @import 部分。这个较小的部分文件由 Grunt 生成。 Sass !default; 用作后备变量。或者你可能不再需要这些(被 Grunt 覆盖)。

Grunt 设置

在 Grunt 方面，我添加了一个自定义任务，该任务仅在我们的登台(或测试)服务器上执行(例如在构建过程中)。在我们的本地计算机上，我们继续使用根相对路径进行本地开发。

Grunt 自定义目标配置

module.exports = function(grunt) {
    grunt.initConfig({
        writeSassConfig: {
            options: {
                scss: './assets/scss/partials/_sourcepaths.scss',
                dirFont: '/assets/fonts',
                dirHtc: '/assets/htc',
                dirImg: '/assets/images'
            },
            cdn: {
                //pathprefix: 'http://cdn.website.com'
                pathprefix: grunt.option('pathprefix') || ''
            }
        }
    }
});

示例 cdn 具有硬编码 ( http://cdn.website.com ) 或动态(通过 grunt.option 命令行参数)pathprefix 的 Grunt 目标。请参阅下面的“运行 Grunt 任务”，了解如何运行它。它还有一个后备 || '' 为空，这实际上将 Sass 配置文件中的路径重置为根相对 URL。

Grunt 自定义任务

然后是所需的 Grunt 任务(用于上面的配置)。此 Grunt 任务将 Sass 部分写入磁盘。

grunt.registerMultiTask('writeSassConfig', 'Write Sass config file to change source paths', function(){
    grunt.config.requires(
        this.name + '.options.scss',
        this.name + '.options.dirFont',
        this.name + '.options.dirHtc',
        this.name + '.options.dirImg',
    );

    // Create Sass vars
    var _thisOptions = this.options(),
        pathprefix = this.data.pathprefix || '',
        contents = "// Generated by Grunt for dynamic paths like a CDN server\n";
        contents += "$dir-font: '" + pathprefix + _thisOptions.dirFont + "';\n";
        contents += "$dir-htc: '" + pathprefix + _thisOptions.dirHtc + "';\n";
        contents += "$dir-img: '" + pathprefix + _thisOptions.dirImg + "';\n";

    grunt.file.write(_thisOptions.scss, contents);
});

Grunt 别名任务

这将创建一个由两个任务依次运行的自定义链式工作流程。 sass:dist 是一个常规的 Grunt 任务，并且通过 grunt-sass (libsass) 插件实现目标。您可能已经在使用这个。

grunt.registerTask('build-sasscdn', 'Generate Sass config for different Sass paths like a CDN server path', function(){
    grunt.task.run(
        'writeSassConfig',
        'sass:dist'
    );          
});

运行自定义 Grunt 任务

上面的 Grunt 自定义目标中的 pathprefix 变量，通过 grunt.option('pathprefix') 通过 grunt 命令提供 -行参数:

grunt build-sasscdn --pathprefix="https://cdn.website.com"

此域名可以通过登台(测试)服务器服务器端脚本语言(如.NET/PHP/Ruby)更改。 Sass 配置文件 _sourcepaths.scss 现在被 Grunt 更改为:

_sourcepaths.scss

$dir-font: 'https://cdn.website.com/assets/fonts';
$dir-htc: 'https://cdn.website.com/assets/htc';
$dir-img: 'https://cdn.website.com/assets/images';

请记住，_sourcepaths.scss 是由 Sass 导入的。然后，Grunt 别名任务运行通常的 sass:dist 目标，该目标仅重新编译 Sass(在临时/测试服务器上)使用更新的硬编码 CDN 域名路径 在 CSS 中。