Question

我有一个使用Django，Python和Wagtail构建的网站。

我想要的是能够在后端添加一些样式，然后在前端的.scss文件中使用它。

例如，我希望能够通过后端将primary color设置为#fff，然后在我的.scss文件中以如下方式使用它：

$g-color-primary: primary_color_from_backend;
$g-font-size-default: primary_font_size_from_backend;

我不知道该怎么做以及是否有可能？

感谢您的帮助。

Answer 1

不幸的是，这是不可能的。您可以改为在CSS文件中定义不同的类，然后根据其中的Django模板变量在HTML模板中使用它们。

Answer 2

这将需要在物理.scss文件中写出sass颜色变量的内容（使用scss语法），具体取决于您的开发环境。然后将其导入其他.scss文件，以通过Gulp，Webpack等前端构建过程工具进行编译和输出。

例如，Webpack的sass-loader插件提供了在前端构建/编译时预先添加sass代码的选项。

https://github.com/webpack-contrib/sass-loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            prependData: '$env: ' + process.env.NODE_ENV + ';',
                        },
                    },
                ],
            },
        ],
    },
};

如何在.scss文件中使用后端变量

2 个答案: