本文講述如何通過 sass-resources-loader 全局注冊變量及由 @mixin聋涨、% 定義的通用樣式浑塞，以 vue 項目為例语婴。

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

其中 app.scss 在入口文件 entry.js 內(nèi) import溶握，它定義了部分通用樣式（但并未有使用 @mixin 或 % 定義的）杯缺，引用方式即在組件元素上添加相應(yīng) class。請注意：

app.scss 內(nèi)的通用樣式并未有使用 @mixin 或 % 定義的睡榆。

app.scss 內(nèi)定義的 @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 均會產(chǎn)生一段雷同的代碼。

故不宜在 app.scss 內(nèi)定義 @mixin葡兑、%奖蔓、變量，應(yīng)將 @mixin讹堤、% 抽離至 mixins.scss锭硼，變量抽離至 vars.scss。但在 .vue 中引用它們也需各自 import蜕劝，依然麻煩...

是否可全局注冊 mixins.scss 及 vars.scss？請嘗試 sass-resources-loader轰异！

在 build/utils.js 的 exports.cssLoaders 函數(shù)內(nèi)添加如下代碼：

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 本質(zhì)并無差異。然 var.scss牙肝、mixins.scss 注入 sass loader resources 不會產(chǎn)生冗余代碼唉俗。

使用 @mixin嗤朴、% 定義的通用樣式未被繼承不會被解析產(chǎn)生相應(yīng)的 css，則不會冗余虫溜。

想了解更多的同學請研讀 Sass: Syntactically Awesome Style Sheets雹姊。

謝幕！

作者：呆戀小喵

相關(guān)文章：Sass 學習筆記

我的后花園：https://sunmengyuan.github.io/garden/

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

原文鏈接：https://sunmengyuan.github.io/garden/2018/02/06/sass-var.html