通过 sass-resources-loader 全局注册 Sass 变量

本文讲述如何通过 sass-resources-loader 全局注册变量及由 @mixin、% 定义的通用样式,以 vue 项目为例。

先描述下情境,项目中含如下 3 个 .scss 文件:

通过 sass-resources-loader 全局注册 Sass 变量

其中 app.scss 在入口文件 entry.js 内 import,它定义了部分通用样式(但并未有使用 @mixin 或 % 定义的),引用方式即在组件元素上添加相应 class。请注意:

app.scss 内的通用样式并未有使用 @mixin 或 % 定义的。

app.scss 内定义的 @mixin、%、变量,若在 .vue 中引用需再次 import app.scss,否则 not found(sass 变量作用域的锅):

<style lang="scss" scoped>
@import "../assets/app.scss";
.gm-nodata {
    img, p {
        position: absolute;
        @extend %gm-center;
    }
    p {
        font-size: 0.3rem;
        line-height: 0.4rem;
        color: $fClrWeak;
        margin-top: 1.5rem;
    }
}
</style>

每一 .vue 均 import app.scss,很麻烦...然而更严重的是:

通过 sass-resources-loader 全局注册 Sass 变量

上图为 build 后部分代码的截图,显而易见上下两段代码是冗余的。因为在 .vue 中每 import app.scss 均会产生一段雷同的代码。

故不宜在 app.scss 内定义 @mixin、%、变量,应将 @mixin、% 抽离至 mixins.scss,变量抽离至 vars.scss。但在 .vue 中引用它们也需各自 import,依然麻烦...

是否可全局注册 mixins.scss 及 vars.scss?请尝试 sass-resources-loader

在 build/utils.js 的 exports.cssLoaders 函数内添加如下代码:

exports.cssLoaders = function (options) {
    // ...

    function generateSassResourceLoader () {
        var loaders = [
            cssLoader,
            'sass-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/var.scss'),
                        path.resolve(__dirname, '../src/assets/mixins.scss')
                    ]
                }
            }
        ]
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

    // ...

    return {
        // ...
        sass: generateSassResourceLoader(),
        scss: generateSassResourceLoader(),
        // ...
    }
}
Now you can use these resources without manually importing them.

那我们可将 app.scss 添加至 sass loader resources 吗?像这样:

var loaders = [
    cssLoader,
    'sass-loader',
    {
        loader: 'sass-resources-loader',
        options: {
            resources: [
                path.resolve(__dirname, '../src/assets/app.scss'),
                path.resolve(__dirname, '../src/assets/var.scss'),
                path.resolve(__dirname, '../src/assets/mixins.scss')
            ]
        }
    }
]

不可以!build 后代码冗余:

通过 sass-resources-loader 全局注册 Sass 变量

为何?sass-resources-loader 似乎帮我们完成了 import,但与手动 import 本质并无差异。然 var.scss、mixins.scss 注入 sass loader resources 不会产生冗余代码。

使用 @mixin、% 定义的通用样式未被继承不会被解析产生相应的 css,则不会冗余。

想了解更多的同学请研读 Sass: Syntactically Awesome Style Sheets

谢幕!


作者:呆恋小喵

相关文章:Sass 学习笔记

我的后花园:https://sunmengyuan.github.io...

我的 github:https://github.com/sunmengyuan

原文链接:https://sunmengyuan.github.io...

相关推荐