无法导入'；font/scss/variables'；在本地SCSS模块中

我已经安装了Font Awesome v4.7.0，我正在尝试编写扩展Font Awesome图标类的Sass类，如下所示：

div.edit-icon{
@扩展fa-pencil-square-o；
字体大小：$图标字体大小；
}

在我的一个SCSS文件（

\u shared.SCSS

）的开头，我尝试从Font Awesome（安装在

节点模块

中）导入所需的基本要素：

@import'~font/scss/variables'；
@导入“~font/scss/mixins”；
@导入“~font/scss/icons”；

但是，当我保存文件时，Webpack会出现以下错误：

./~/sass提取加载程序！中的

错误/app/views/components/_shared.scss
模块生成失败：错误：未找到要导入的文件或文件不可读：~font/scss/variables。
父样式表：C:/Users//webstoreprojects//app/views/components/\u shared.scss
在options.error（C:\Users\\webstorprojects\\node\u modules\node sass\lib\index.js:291:26）
@./app/views/components/candb/MessageDefinitionView/CoreMessageDefinitionView.tsx 9:28-77
@./app/views/components/candb/MessageDefinitionView/TxMessageDefinitionView.tsx
@./app/views/components/candb/index.ts
@./app/view/components/index.ts
@./app/views/layouts/Page/Page.tsx
@./app/routes.tsx
@./app/index.tsx
@多（网页包）-开发服务器/客户端？http://localhost:1212 webpack/hot/dev server react热加载程序/补丁webpack dev server/client？http://localhost:1212/ webpack/hot/only dev server./app/index.tsx

下面是

节点\u模块\font awesome\scss\\u变量的开始部分。scss

：

//变量
// --------------------------
$fa字体路径：“../fonts”！违约
$fa字体大小基准：14px！违约
$fa线高度基准：1！违约
//$fa字体路径：“//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts”！默认值；//用于直接引用引导CDN字体文件
$fa css前缀：fa！违约
$fa版本：“4.7.0”！违约
$fa边框颜色：#eee！违约
$fa反向：#fff！违约
$fa li宽度：（30em/14）！违约

我注意到，

$fa css prefix

的值是一个不带引号的字符串（fa），注释掉这个赋值可以编译这个SCSS文件

这个字符串不带引号是合法的，我可以做什么来允许我导入这个SCSS文件

作为参考，这是我用于加载SCSS模块的网页包配置的相关部分：

//添加SASS支持-编译所有其他.scss文件并将其传输到style.css
{
测试：/^（（？！\.global）。*\.scss$/，
加载程序：extractModuleCSS.extract({
回退：“样式加载器”，
使用：[
“css加载程序？模块&源映射&camelCase&importLoaders=1&localIdentName=[path]\uuuuuuuuuuuuu[name]\uuuuuuuuuuu[local]\uuuuuuuuuuuuuuuuuuuuuuuuuuuuu[hash:base64:5]”，
“sass loader”
]
})
}

---

编辑

我认为当我注释掉

$fa css prefix:…

时，Webpack显示了一个关于不同文件的错误，这意味着至少

\u变量。SCS

编译良好：

未定义变量：“$fa css前缀”。
在C:\Users\\webstoreprojects\\node\u modules\font awesome\scss\\u icons.scss中（第4行第4列）

但显然情况并非如此。如果我注释掉

\u shared

中的其他导入，如下所示：

@import'~font/scss/variables'；
//@导入“~font/scss/mixins”；
//@导入“~font/scss/icons”；

然后，无论我对

\u variables.scss

所做的更改如何，我仍然会看到原始错误（“要导入的文件未找到或无法读取：~font-awesome/scss/variables.”），甚至注释掉整个文件

我更新了标题以反映这一新信息

编辑2

根据@CloudTseng的建议，我尝试了以下方法：

$fa css前缀：“fa”；
@导入“~font/scss/variables”；
@导入“~font/scss/core”；
@导入“~font/scss/icons”；
$icon字体大小：16px；
div.edit-icon{
@扩展.fa；
@扩展fa-pencil-square-o；
字体大小：$图标字体大小；
}
div.cross-icon{
@扩展.fa；
@延长.fa倍；
字体大小：$图标字体大小；
}

令人惊讶的是，这正是我想要的。我感到惊讶的原因是，显然我只需要在本地重新定义

fa css prefix

——我希望如果我这样做的话，我必须从

\u variables.scss

重新定义所有字体变量

但是，检查生成的CSS会发现，所有其他变量都被神奇地解析了，而无需我重新定义它们：

font-awesome/scss/_-icons.scss:

{$fa css prefix}-glass:before{content:$fa var glass；}
.#{$fa css prefix}-音乐：在{content:$fa var music；}之前
.#{$fa css prefix}-search:before{content:$fa var search；}
...

/dist/modules.css：

/*Font Awesome使用Unicode专用区域（PUA）来确保屏幕安全
读卡器不会读取表示图标的随机字符*/
.应用程序查看组件candb FieldDefinitionTable-__FieldDefinitionTable__fa-glass___2rm6a:之前{
内容：“\F000”}
.app视图组件candb FieldDefinitionTable-__u FieldDefinitionTable__fa-music___3q-Vg:之前{
内容：“\F001”}
.app视图组件candb FieldDefinitionTable-__FieldDefinitionTable__fa-search___f89bE:之前{
内容：“\F002”}
...

我建议您阅读此内容。“这对我会有帮助的。”云曾：谢谢，这很有帮助！如果你愿意，你可以提交答案。如果您能解释一下为什么我只需要重新定义

fa css前缀

，而不是所有其他变量（因为我担心我必须这样做），我将不胜感激。我建议您阅读本文。“这对我会有帮助的。”云曾：谢谢，这很有帮助！如果你愿意，你可以提交答案。如果您能解释一下为什么我只需要重新定义

fa css前缀

，而不需要重新定义其他所有变量，我将不胜感激