scss文件导入中~的含义 [英] Meaning of ~ in import of scss files

问题描述

我有一个用于样式化的 npm 库，它使用以下语法导入 scss 文件.我不确定这是什么意思，也找不到任何在线文档.我在构建过程中将 grunt 与 webpack 结合使用.

I have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.

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

推荐答案

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

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

webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import

所以如果你有一个名为 foo.css 的文件和一个模块 foo 那么你可以使用 ~ 如果你想包含这个模块.

So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.

这篇关于scss文件导入中~的含义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！