1

对于本地 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 url 将使用 CDN URL。

4

1 回答 1

3

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

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

如果您已经在使用 Grunt 和 Sass，实际上非常简单。我们已经在暂存（测试）服务器上安装了 NodeJS 和 Grunt-cli。

萨斯设置

在 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;

注意 的@import部分_sourcepaths.scss。这个较小的部分文件由 Grunt 生成。Sass!default;用作后备变量。或者你甚至可能不再需要这些（被 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') || ''
            }
        }
    }
});

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

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 自定义目标中的pathprefixvar. viagrunt.option('pathprefix')是通过grunt命令行参数提供的：

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

此域名可以通过 staging (test) -server 服务器端脚本语言（如 .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（在登台/测试服务器上），并在 Css 中更新硬编码 CDN 域名路径。

于 2015-07-14T12:07:55.270 回答