經過 sass-resources-loader 全局註冊 Sass 變量

時間 2019-12-05

標籤經過 sass resources loader 全局註冊變量简体版

原文原文鏈接

本文講述如何經過 sass-resources-loader 全局註冊變量及由 @mixin、% 定義的通用樣式，以 vue 項目爲例。css

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

其中 app.scss 在入口文件 entry.js 內 import，它定義了部分通用樣式（但並未有使用 @mixin 或 % 定義的），引用方式即在組件元素上添加相應 class。請注意：vue

app.scss 內的通用樣式並未有使用 @mixin 或 % 定義的。

app.scss 內定義的 @mixin、%、變量，若在 .vue 中引用需再次 import app.scss，不然 not found（sass 變量做用域的鍋）：git

<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，很麻煩...然而更嚴重的是：github

上圖爲 build 後部分代碼的截圖，顯而易見上下兩段代碼是冗餘的。由於在 .vue 中每 import app.scss 均會產生一段雷同的代碼。npm

故不宜在 app.scss 內定義 @mixin、%、變量，應將 @mixin、% 抽離至 mixins.scss，變量抽離至 vars.scss。但在 .vue 中引用它們也需各自 import，依然麻煩...segmentfault

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

在 build/utils.js 的 exports.cssLoaders 函數內添加以下代碼：app

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。

謝幕！

做者：呆戀小喵