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

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

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

其中 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，很麻烦...然而更严重的是：

上图为 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 似乎帮我们完成了 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...