37

我只想加载登录页面所需的 css 以提高性能。在我的其他页面上，我想要一个分组的 css 文件，该文件将缓存在包含我所有 css 的每个页面上。

我有以下文件：

minifiedcssforloginpage.scss
grouped-pages.scss

在 minifiedcssforloginpage.scss 我声明 $load-complete-css:false。之后我导入 myproject.scss ，其中包含我的模块、布局、核心的所有导入......在 myproject.scss 我想做类似的事情

@if $load-complete-css {
     @import module1;
     @import module2;
     @import module3;
}

因此，minifiedcssforloginpage.scss 将生成 minifiedcssforloginpage.css，其 css 少于 grouped-pages.css（将 var $load-complete-css 设置为 true）。

但我得到一个错误，这是不可能的“导入指令可能不能在控制指令或混合中使用”。

4

6 回答 6

39

这是不允许的事情之一。您唯一能做的就是将这些导入转换为混合（将文件导入外部@if并在适当的情况下调用混合）。

澄清：

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

样式.scss

@import "partial";
@if $someval == true {
    @include partial;
}
于 2012-12-14T13:11:09.357 回答
13

核心开发团队不愿意实现这个特性，尽管他们正在考虑实现一个全新的依赖系统。

请参阅以下 Github 问题：

于 2014-03-30T12:28:39.053 回答
7

以对您有意义的方式将您的样式放入各种部分文件中。然后，您可以为您的登录页面创建一个单独的 SASS 文件，该文件仅导入具有相关样式的文件。

引用我对另一个问题的回答：

目前无法使用 SASS 动态包含文件。 @import不能在控制指令（例如@if）或混合中使用，在导入指令中使用变量是错误的语法，并且没有用于提前结束文件执行的指令（这 实际上将允许条件导入）。但是，您可以通过更改样式规则的结构来解决您的问题。

...如果您有 [应该] 有条件地包含的样式 [它们] 应该封装在 mixins、“模块”或“库”文件中。...主要思想是导入一个这样的文件不会输出任何 css。这样，您可以冗余地导入这些文件，以便您可以在任何需要的地方使用 mixin。

于 2014-01-15T21:41:54.943 回答
2

不幸的是，目前没有办法在 if 块中放置 import 语句。

我知道的最接近的替代方法是使用该additionalData字段将预处理器功能添加到您的 webpacksass-loader配置中：

{
    loader: "sass-loader",
    options: {
        sassOptions: {
            includePaths: [...],
        },
        additionalData: (content: string, loaderContext)=>{
            // More info on available properties: https://webpack.js.org/api/loaders
            const {resourcePath, rootContext} = loaderContext;
            
            const finalPath = someCondition ? path1 : path2;
            return content.replace(/SomeDynamicPathPlaceholder/g, finalPath);
        },
    },
},

additionalData有关该字段的更多信息： https ://webpack.js.org/loaders/sass-loader/#additionaldata

于 2020-08-19T16:58:46.110 回答
1

我知道这是一个非常古老的问题，但我们最近在我们自己的微型 UI 框架中实现了这个，如下所示：

ui-framework/config.scss

$components: (
    "component-a": true,
    "component-b": false
) !default;

// A bunch of other default config

ui-framework/main.scss

@import "component-a";
@import "component-b";

ui-framework/component-a.scss

@if (map-get($components, "component-a") {
    .component-a {
        // Bunch of code here
    }
}

ui-framework/component-b.scss

@if (map-get($components, "component-b") {
    .component-b {
        // Bunch of code here
    }
}

然后在每个项目中：

一个项目/main.scss

// NOTE: We only want component b in this project
$components: (
    "component-a": false,
    "component-b": true
);

@import "ui-framework/config.scss";
@import "ui-frameowrk/main.scss";

我们不会对每个单独的组件都这样做，而是对那些并不总是在使用的巨大组件（如幻灯片、对话框、表单相关代码等）。

于 2021-09-14T21:02:46.870 回答
0

老问题，我知道；只是觉得我会根据我正在做的事情提供一个替代方案和扩展示例。

我遇到了这个问题，因为我希望将一个 SCSS 文件用于较小的屏幕，而将一个 SCSS 文件用于较大的屏幕（桌面上的顶部菜单导航和手机的汉堡菜单）。

在没有 Bootstrap 的情况下使用 Blazor，我想根据实际的 html 使用一个菜单结构，然后使用 SCSS 在相关大小的两者之间切换。我为导航的桌面版本创建了一个 SCSS 文件，并开始为移动版本创建一个。在我意识到这个绊脚石之前，我的计划是根据 mixin（恰当地命名为mobileOrDesktop）中的媒体查询选择性地导入 SCSS。

我的想法是使用这个 mixin 来对媒体大小进行所有基本结构操作。像这样的东西：

@mixin mobileOrDesktop {
    @media (min-width: 961px) {
        @import 'desktopNavbar.scss';

        .container-fluid {
            margin-top: 70px;
            height: calc(100% - calc(60px + 70px));
        }

        //show the footer, maybe tweak the font size, etc
    }

    @media (max-width:960px) {
        @import 'moblieNavbar.scss';

        .container-fluid {
            height: 100%;
        }
        //hide the footer, maybe tweak font sizes, etc
    }
}

不幸的是，由于 SCSS 的工作方式，我们无法做到这一点。因此，我不只是在媒体查询中转储所有 CSS（我想让它相对分开，以便调试/更改更易于管理），而是寻找替代方案。

与 Cinnamon 类似，我发现最可行的解决方案是将 SCSS 导入到 mixin 之外，然后简单地将其包含在 mixin 中：

@import 'desktopNavbar.scss';
@import 'mobileNavbar.scss';

@mixin mobileOrDesktop {
    @media (min-width: 961px) {
        @include desktopNavbar;

        .container-fluid {
            margin-top: 70px;
            height: calc(100% - calc(60px + 70px));
        }
    }

    @media (max-width:960px) {
        @include moblieNavbar;

        .container-fluid {
            height: 100%;
        }
    }
}

导入的 SCSS 文件本身就是一个 mixin，即desktopNavbar.scss变为：

@import 'siteVariables.scss';

@mixin desktopNavbar {
    #navbar {
        .burgerIcon {
            display: none;
        }

        .nav {
            overflow: hidden;
            background-color: $navy;
            vertical-align: middle;
            height: 70px;
            line-height: 70px;
            color: $blizzard;
            position: fixed;
            top: 0;
            width: 100%;
            display: block;
            z-index: 99999999;

            .leftBlock, .midBlock, .rightBlock {
                display: inline-block;
                vertical-align: middle;
                height: 70px;
                padding: 0px;
                margin: 0px;
                line-height: 70px;
            }

            .leftBlock {
                width: 20%;

                .imgLogo {
                    margin-left: 10px;
                    margin-top: 5px;
                    max-width: 120px;
                }
            }

            .midBlock {
                width: 60%;
                text-align: center;

                .navbar-nav {
                    display: inline-flex;
                    flex-wrap: nowrap;
                    flex-grow: 2;
                    flex-shrink: 2;
                    list-style: none;
                    vertical-align: middle;
                    margin: 0px;
                    padding: 0px;

                    .nav-item {
                        max-width: 175px;
                        color: $white;
                        display: inline-block;
                        vertical-align: middle;
                        height: 70px;

                        .btn-link {
                            font-size: 16px;
                            text-align: right;
                            color: $white;
                            padding: 14px;
                            line-height: 20px;
                            text-decoration: none;
                            vertical-align: middle;

                            span {
                                font-family: 'Font Awesome Solid';
                                line-height: 60px;
                                height: 60px;
                                vertical-align: middle;
                                padding: 5px;
                            }
                        }

                        &.dropdown {
                            font-size: 16px;
                            text-align: right;
                            line-height: 20px;
                            text-decoration: none;
                            vertical-align: middle;

                            .dropbtn {
                                font-size: 16px;
                                text-align: right;
                                line-height: 20px;
                                text-decoration: none;
                                vertical-align: middle;

                                span {
                                    font-family: 'Font Awesome Solid';
                                    line-height: 60px;
                                    height: 60px;
                                    vertical-align: middle;
                                    padding: 5px;
                                }
                            }

                            .dropdown-content {
                                display: none;
                                position: fixed;
                                top: 68px;
                                text-align: center;
                                background-color: $star-command;
                                min-width: 160px;
                                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                                z-index: 99999999999;

                                .dropdown-header {
                                    color: $blizzard;
                                }

                                .dropdown-item {
                                    color: $powder;
                                    padding: 12px 16px;
                                    text-decoration: none;
                                    display: block;

                                    &:hover {
                                        background-color: $blizzard;
                                        color: $navy;
                                    }
                                }
                            }

                            &:hover {
                                background-color: $star-command;

                                .dropdown-content {
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }

            .rightBlock {
                width: 20%;
            }
        }
    }
}

站点 SCSS 可以简单地是：

@import '../../FontAwesome/scss/fontawesome.scss';
@import '../../FontAwesome/scss/regular.scss';
@import '../../FontAwesome/scss/solid.scss';

@import 'siteVariables.scss';
@import 'mixins.scss';

//import other stuff here

html, body {
    height: 100%;
    overflow: hidden;
    width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin: 0px;
    @include mobileOrDesktop;

    .container-fluid {
        overflow: auto;

        main {
            padding: 15px;
        }
    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;

        .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }
    }
}
于 2021-12-02T11:56:24.947 回答