Làm cách nào để tải phông chữ tuyệt vời bằng SCSS (SASS) trong Webpack bằng các đường dẫn tương đối?

Tôi có font-awesome trong thư mục node_modules của mình, vì vậy tôi cố gắng nhập nó vào tệp .scss chính của mình như sau:

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

Nhưng biên dịch gói Webpack không thành công, nói với tôi

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

vì tệp font-awesome.scss tham chiếu đến một đường dẫn tương đối, '../fonts/'.

Làm cách nào để yêu cầu scss \ webpack @import một tệp khác và sử dụng thư mục của tệp đó làm thư mục chính để các đường dẫn tương đối của nó hoạt động như mong đợi?

Sử dụng

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

nơi $fa-font-pathbiến được nhìn thấy trongfont-awesome/scss/_variables.scss

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

Dấu ngã "~" được nội suy bởi sass-loader bằng cách sử dụng chủ nghĩa webpack .

Dường như không có bất kỳ cách nào để @import các tệp có đường dẫn tương đối của riêng chúng trong SCSS \ SASS.

Vì vậy, thay vào đó, tôi quản lý để làm cho điều này hoạt động:

• Nhập tệp scss \ css font-awesome vào tệp .js hoặc .jsx của tôi , không phải tệp biểu định kiểu của tôi:

  nhập 'font-awesome / scss / font-awesome.scss';    

• Thêm cái này vào tệp webpack.config của tôi:

    mô-đun:
    {
        bộ nạp:
        [
            {test: /\.js?$/, trình tải: 'babel-loader? cacheDirectory', loại trừ: / (node_modules | bower_components) /},
            {test: /\.jsx?$/, trình tải: 'babel-loader? cacheDirectory', loại trừ: / (node_modules | bower_components) /},
            {test: /\.scss?$/, trình tải: ['style-loader', 'css-loader', 'sass-loader']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, trình tải: 'file-loader? mimetype = image / svg + xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, trình tải: "file-loader? mimetype = application / font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, trình tải: "file-loader? mimetype = application / font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, trình tải: "file-loader? mimetype = application / octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, trình tải: "file-loader"},
        ]
    }

Sau đây làm việc cho tôi:

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

Điều này là để nhập font-awesome& phông chữ bắt buộc trong dự án. Thay đổi khác là trong webpackcấu hình, để tải các phông chữ cần thiết bằng cách sử dụng file-loader.

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

Giải quyết bằng cách thay đổi app.scss:

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

Cách này hữu ích để giữ cho các phụ thuộc bên ngoài không thay đổi và không được phiên bản.

Tôi chỉ đặt đường dẫn trong tệp scss chính của mình và nó hoạt động:

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

Đây là cách nó hoạt động đối với tôi, mẹo là đặt $fa-font-pathđường dẫn của các phông chữ như sau.

$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';

Lưu ý : Vui lòng kiểm tra thư mục phông chữ của bạn node_modulestrong trường hợp của tôi là@fortawesome/fontawesome-free

Điều làm việc cho tôi là thêm resolve-url-loadervà bậtsourceMaps

Tôi đã nhập font-awesome vào .scsstệp gốc của mình :

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

Tệp gốc này được nhập vào main.jstệp của tôi được xác định là điểm nhập của Webpack:

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

Sau đó, các quy tắc mô-đun webpack cuối cùng của tôi trông giống như sau:

 ...
 {
    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]', },
  }
  ...

Ghi chú:

Tôi đã sử dụng mini-css-extract-plugin, có thể đăng ký như thế này:

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

url-loaderyêu cầu file-loaderphải được cài đặt, vì vậy nếu bạn gặp lỗi như:, cannot find module file-loaderthì chỉ cần cài đặt nó:

npm i -D file-loader

Liên kết hữu ích :

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

Đối với Phiên bản 5.14, những điều sau phù hợp với tôi:

$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";

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';