如何使用相对路径在 Webpack 中使用 SCSS (SASS) 加载超赞字体？

Question

我的 node_modules 文件夹中有很棒的字体，所以我尝试将它导入到我的主 .scss 文件中，如下所示：

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

但是webpack打包编译失败，告诉我

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot

因为 font-awesome.scss 文件引用了一个相对路径，'../fonts/'。

如何让 scss\webpack @import 另一个文件，并将该文件的文件夹用作主文件夹，以便其相对路径按预期工作？

Answer 1

似乎没有任何方法可以@import 在 SCSS 中有自己的相对路径的文件\ SASS。

所以我设法让 this 开始工作：

在我的 .js 或 .jsx 文件中导入 scss \ css font-awesome 文件，不是我的样式表文件：
```
import 'font-awesome/scss/font-awesome.scss';    
```
将此添加到我的 webpack.config 文件中：

    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    }

Answer 2

使用

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

在 font-awesome/scss/_variables.scss

中可以看到 $fa-font-path 变量

$fa-font-path: "../fonts" !default;

波浪号“~”由 sass-loader 使用 the webpack mecanism 插入。

Answer 3

以下对我有用：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

这是为了在项目中导入font-awesome & 所需的字体。其他变化是 webpack 配置，使用 file-loader.

加载所需的字体

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

Answer 4

通过更改我的app.scss解决：

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

这种方式对于保持外部依赖关系不变和不受版本控制很有用。

Answer 5

我只是在我的主 scss 文件中设置了路径并且它有效:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Answer 6

v.4（symofony 4 + webpack）

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';

Answer 7

对我有用的是添加 resolve-url-loader 并启用 sourceMaps

我已经在根 .scss 文件中导入了 font-awesome：

@import "~font-awesome/scss/font-awesome";
...

这个根文件导入到我定义为 Webpack 入口点的 main.js 文件中：

import './scss/main.scss';
...

那么我最终的 webpack 模块规则是这样的：

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

注：

我用的是mini-css-extract-plugin，可以这样注册：

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

url-loader 需要安装 file-loader，因此如果您收到类似 cannot find module file-loader 的错误，则只需安装它：

npm i -D file-loader

有用链接:

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Answer 8

这就是我的工作方式，诀窍是将 $fa-font-path 设置为如下字体路径。

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

注意：请检查 node_modules 中的字体文件夹，在我的例子中是 @fortawesome/fontawesome-free

Answer 9

对于版本 5.14，以下对我有用：

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

如何使用相对路径在 Webpack 中使用 SCSS (SASS) 加载超赞字体？

How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

node.js

sass

npm

font-awesome

webpack