scss() — vue Function Reference

Architecture documentation for the scss() function in stylePreprocessors.ts from the vue codebase.

Function typescript SfcCompiler ScriptCompiler calls 1 called by 1

Entity Profile

SfcCompiler→ ScriptCompiler→ scss() — vue Function Reference

Dependency Diagram

graph TD
  40abbf2e_9f1d_2de0_db70_88472f2d90f3["scss()"]
  ba46daf5_ee23_b1e3_6003_bd7f1eb01c21["stylePreprocessors.ts"]
  40abbf2e_9f1d_2de0_db70_88472f2d90f3 -->|defined in| ba46daf5_ee23_b1e3_6003_bd7f1eb01c21
  0f4a0c4e_f36e_5a93_023d_c04bc3c0d51b["sass()"]
  0f4a0c4e_f36e_5a93_023d_c04bc3c0d51b -->|calls| 40abbf2e_9f1d_2de0_db70_88472f2d90f3
  cb2cd8b2_72ca_3a6e_f406_51f46fe0a38a["getSource()"]
  40abbf2e_9f1d_2de0_db70_88472f2d90f3 -->|calls| cb2cd8b2_72ca_3a6e_f406_51f46fe0a38a
  style 40abbf2e_9f1d_2de0_db70_88472f2d90f3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/stylePreprocessors.ts lines 23–49

const scss: StylePreprocessor = (source, map, options) => {
  const nodeSass = require('sass')
  const finalOptions = {
    ...options,
    data: getSource(source, options.filename, options.additionalData),
    file: options.filename,
    outFile: options.filename,
    sourceMap: !!map
  }

  try {
    const result = nodeSass.renderSync(finalOptions)
    const dependencies = result.stats.includedFiles
    if (map) {
      return {
        code: result.css.toString(),
        map: merge(map, JSON.parse(result.map.toString())),
        errors: [],
        dependencies
      }
    }

    return { code: result.css.toString(), errors: [], dependencies }
  } catch (e: any) {
    return { code: '', errors: [e], dependencies: [] }
  }
}