@import in @if statement in Sass

Question

I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css

Answer 1

The core dev team is reluctant to implement this feature, although they are considering the implementation of a brand new dependency system.

---

See the following Github issues :

• Allow @import within @if (#451)
• Using @import statements within control directives or mixins (#779)
• Allow optional @imports (#779)
• Dynamic Dependencies (#739)

Answer 2

Put your styles into various partial files in a way that makes sense to you. Then, you can have create a separate SASS file for your login page that imports only the files with the relevant styles.

To quote from my answer to another question:

It is currently not possible to use SASS to include files dynamically. @import cannot be used within control directives (e.g. @if) or mixins, using a variable in an import directive is erroneous syntax, and there is no directive for ending file execution early (which effectively would allow conditional imports). However, you can solve your issue by changing how you structure your style rules.

... If you have styles that [should be] conditionally included [they] should be encapsulated in mixins, in 'module' or 'library' files. ... The main idea is that importing one such file will not output any css. This way, you can import these files redundantly so you can use the mixins wherever you need them.

Answer 3

It's one of those things that's just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the @if and call the mixin where appropriate).

Clarification:

_partial.scss

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

styles.scss

@import "partial";
@if $someval == true {
    @include partial;
}

Answer 4

There isn't currently a way to place import statements within if blocks, unfortunately.

The closest alternative I'm aware of is to use the additionalData field to add a preprocessor function to your webpack sass-loader config:

{
    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);
        },
    },
},

More info on the additionalData field here: https://webpack.js.org/loaders/sass-loader/#additionaldata