vue/compiler-sfc源码分析学习13：如何处理style--day1

前言#

昨天我们分析完了如何处理template，但是有些沮丧，因为核心是在另一个包中。

坏蛋Dan：vue/compiler-sfc源码分析学习--part3:如何处理template--final章节整理

那么按照之前的目标，该轮到style了

坏蛋Dan：vue/compiler-sfc源码分析学习2--确认后续分析目标

今天我们来找处理style的入口

正文#

还记得我们之前分析vue-loader的文章吗？

坏蛋Dan：vue-loader源码分析学习

里面有我们分析到的解析style的时候, vue-loader会根据不同的代码情况比如inline-style往处理样式的loader（组，比如[style-loader, css-loader, ...]）里插入合适的loader。

但不管怎么样，都会插入一个stylePostLoaderPath的变量指向stylePostLoader。

我们进入到stylePostLoader中

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const qs = require("querystring");
const compiler_sfc_1 = require("vue/compiler-sfc");
// This is a post loader that handles scoped CSS transforms.
// Injected right before css-loader by the global pitcher (../pitch.js)
// for any <style scoped> selection requests initiated from within vue files.
const StylePostLoader = function (source, inMap) {
    const query = qs.parse(this.resourceQuery.slice(1));
    const { code, map, errors } = (0, compiler_sfc_1.compileStyle)({
        source: source,
        filename: this.resourcePath,
        id: `data-v-${query.id}`,
        map: inMap,
        scoped: !!query.scoped,
        trim: true,
        isProd: this.mode === 'production' || process.env.NODE_ENV === 'production',
    });
    if (errors.length) {
        this.callback(errors[0]);
    }
    else {
        this.callback(null, code, map);
    }
};
exports.default = StylePostLoader;

可以看到调用了@vue/compiler-sfc的compileStyle方法

这就是处理后的block的style。

既然找到入口了，我们就去到对应的地方开启调试之旅吧~

发布于 2022-12-08 15:45・IP 属地广东

正文#

还记得我们之前分析vue-loader的文章吗？

但不管怎么样，都会插入一个stylePostLoaderPath的变量指向stylePostLoader。

我们进入到stylePostLoader中

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const qs = require("querystring");
const compiler_sfc_1 = require("vue/compiler-sfc");
// This is a post loader that handles scoped CSS transforms.
// Injected right before css-loader by the global pitcher (../pitch.js)
// for any <style scoped> selection requests initiated from within vue files.
const StylePostLoader = function (source, inMap) {
    const query = qs.parse(this.resourceQuery.slice(1));
    const { code, map, errors } = (0, compiler_sfc_1.compileStyle)({
        source: source,
        filename: this.resourcePath,
        id: `data-v-${query.id}`,
        map: inMap,
        scoped: !!query.scoped,
        trim: true,
        isProd: this.mode === 'production' || process.env.NODE_ENV === 'production',
    });
    if (errors.length) {
        this.callback(errors[0]);
    }
    else {
        this.callback(null, code, map);
    }
};
exports.default = StylePostLoader;

可以看到调用了@vue/compiler-sfc的compileStyle方法

这就是处理后的block的style。

既然找到入口了，我们就去到对应的地方开启调试之旅吧~

发布于 2022-12-08 15:45・IP 属地广东