导入 scss 文件中 ~ 的含义

Posted 2023-03-07

【中文标题】导入 scss 文件中 ~ 的含义

【英文标题】：Meaning of ~ in import of scss files

【发布时间】：2016-12-17 05:42:42

【问题描述】：

我有一个用于样式的 npm 库，它使用以下语法导入 scss 文件。我不确定这意味着什么，也无法在线找到任何文档。我在构建过程中使用 grunt 和 webpack。

@import '~bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon-neat';

【参考方案1】：

来自sass-loader#imports 项目的文档，

webpack 提供了一种高级机制来解析文件。这 sass-loader 使用 node-sass 的自定义导入器功能来传递所有 对 webpack 解析引擎的查询。因此你可以导入你的 Sass 来自 node_modules 的模块。只需在它们前面加上一个 ~ 来告诉 webpack 这不是相对导入

因此，如果您有一个名为 foo.css 的文件和一个名为 foo 的模块，那么如果您想包含该模块，则可以使用 ~。