Question

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

div.edit-icon {
  @extend .fa-pencil-square-o;
  font-size: $icon-font-size;
}

在我的一个SCSS文件（_shared.scss）的开头，我尝试从Font Awesome导入我需要的基本要素（安装在node_modules中）：

@import '~font-awesome/scss/variables';
@import '~font-awesome/scss/mixins';
@import '~font-awesome/scss/icons';

但是，当我保存文件时，Webpack给出了这个错误：

ERROR in ./~/sass-extract-loader!./app/views/components/_shared.scss
Module build failed: Error: File to import not found or unreadable: ~font-awesome/scss/variables.
Parent style sheet: C:/Users/<me>/WebstormProjects/<project>/app/views/components/_shared.scss
    at options.error (C:\Users\<me>\WebstormProjects\<project>\node_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/views/components/index.ts
 @ ./app/views/layouts/Page/Page.tsx
 @ ./app/routes.tsx
 @ ./app/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.tsx

这是node_modules\font-awesome\scss\_variables.scss：

的开头

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;

我注意到$fa-css-prefix的值是一个不带引号的字符串（fa），并且注释掉这个赋值允许这个SCSS文件进行编译。

如何将此字符串取消引用是合法的，我该怎么做才能允许我导入此SCSS文件？

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

// Add SASS support  - compile all other .scss files and pipe it to style.css
{
  test: /^((?!\.global).)*\.scss$/,
  loader: extractModuleCSS.extract({
    fallback: 'style-loader',
    use: [
    'css-loader?modules&sourceMap&camelCase&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
    'sass-loader'
    ]
  })
}

修改

我认为当我评论$fa-css-prefix: ...时，Webpack显示有关不同文件的错误这意味着至少_variables.scss编译得很好：

Undefined variable: "$fa-css-prefix".
          in C:\Users\<me>\WebstormProjects\<project>\node_modules\font-awesome\scss\_icons.scss (line 4, column 4)

显然情况并非如此。如果我在_shared中注释掉其他导入，请执行以下操作：

@import '~font-awesome/scss/variables';
//@import '~font-awesome/scss/mixins';
//@import '~font-awesome/scss/icons';

然后我仍然看到原始错误（'要导入的文件未找到或不可读：~sont-awesome / scss / variables。'），无论我对_variables.scss进行哪些更改 - 甚至评论整个文件。

我已更新标题以反映此新信息。

修改2

根据@ CloudTseng的建议，我尝试了这个：

$fa-css-prefix: 'fa';
@import '~font-awesome/scss/variables';
@import '~font-awesome/scss/core';
@import '~font-awesome/scss/icons';

$icon-font-size: 16px;

div.edit-icon {
  @extend .fa;
  @extend .fa-pencil-square-o;
  font-size: $icon-font-size;
}

div.cross-icon {
  @extend .fa;
  @extend .fa-times;
  font-size: $icon-font-size;
}

令人惊讶的是，这给了我我想要的东西。我发现这个令人惊讶的原因是显然我只需要在本地重新定义fa-css-prefix - 我希望我必须重新定义所有来自_variables.scss的字体真棒变量如果我走了这条路。

但是，检查我生成的CSS会告诉我所有其他变量都是神奇地解决的，我不需要重新定义它们：

字体真棒/ SCSS / _icons.scss ：

.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }
.#{$fa-css-prefix}-search:before { content: $fa-var-search; }
...

/dist/modules.css ：

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-glass___2rm6a:before {
  content: "\F000"; }

.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-music___3q-Vg:before {
  content: "\F001"; }

.app-views-components-candb-FieldDefinitionTable-___FieldDefinitionTable__fa-search___f89bE:before {
  content: "\F002"; }
...

无法在本地SCSS模块

0 个答案: