如何在 .mjs 脚本中使用 Node Sass 解决别名？答案

【问题标题】：How do I Resolve an Alias with Node Sass in a .mjs Script?如何在 .mjs 脚本中使用 Node Sass 解决别名？
【发布时间】：2020-11-10 07:25:21
【问题描述】：

我的项目结构有一个用于全局设置等的 SCSS 库，主要组件 scss 模块位于其他地方，并带有相应的组件文件。我的 Webpack 设置为在构建时解析路径别名 @，因此在运行项目时我对 @import "@/src/scss/variables/blah-blah.scss" 等行的使用效果很好。

相反，我有一些实用程序脚本用于进行 SCSS 基准测试，只是一些编译和分析操作来帮助说明我们在进行样式更改时的性能提升。我使用 .mjs 文件扩展名构建了这些文件，我认为这在这里并不重要，它只是帮助与 Typescript 一起玩。

所以当 Node Sass 遇到像 @import "@/src/scss/variables/blah-blah.scss" 这样的路径时，它不会解析路径。这并不奇怪，但我似乎找不到最好的解决方案来帮助解决我的脚本中的路径，而不是添加 NPM 包来完成看似简单的工作。我应该如何处理这个问题？

错误来自await sass.render()

import { writeFileSync } from "fs";
import sass from "node-sass";
import tildeImporter from "node-sass-tilde-importer";
import { resolve } from "path";

export const compileCSS = async module => {
  const input = `src/components/${module}/scss/module.scss`;
  const output = `stats/css/${module}.css`;
  await sass.render(
    {
      file: resolve(input),
      importer: tildeImporter,
      outputStyle: "expanded",
      outFile: resolve(output),
      sourceMap: true
    },
    async function(error, result) {
      if (error) {
        await console.log(module, "COMPILE ERROR", error.message);
      } else {
        writeFileSync(resolve(output), result);
        return result;
      }
    }
  );
};

【问题讨论】：

标签： javascript node.js sass node-sass

【解决方案1】：

进一步的研究表明，Node Sass 目前没有很好的方法来实现这一点，尽管一些想法正在酝酿中。

我通过将我的统计信息收集操作转换为一个 Webpack 加载器模块来解决这个问题，该模块在步骤之间分析并吐出我的数据，以将编译的样式打包到包中。这样我就可以解析别名路径并简化开发体验。这是一个比我原先设想的更好的解决方案，所以我很高兴。

【讨论】：