Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'”

Posted

技术标签:

【中文标题】Webpack“找不到模块:错误:无法解析\'../webfonts/fa-solid-900.eot\'”【英文标题】:Webpack "Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' "Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'” 【发布时间】:2019-12-06 04:45:58 【问题描述】:

我成功为 js 和 sass 配置了 webpack。在我将字体导入 scss 文件之前,它运行良好。我将尝试在下面的代码中显示它。

我的 webpack 配置

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = 
    optimization: 
        minimizer: [new OptimizeCSSAssetsPlugin()],
    ,
    entry: path.resolve(__dirname + '/public/src/js/adminMain.js'),
    output: 
        path: path.resolve(__dirname + '/public/dist/'),
        filename: 'adminBundle.js'
    ,
    module: 
        rules: [
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: 
                loader: 'babel-loader',
                options: 
                    presets: ['@babel/preset-env']
                
            ,
            test: /\.(sa|sc|c)ss$/,
            use: [
                    loader: MiniCssExtractPlugin.loader
                , 
                    loader: "css-loader",
                ,
                
                    loader: "postcss-loader"
                ,
                
                    loader: "sass-loader",
                    options: 
                        implementation: require("sass")
                    
                
            ]
        ]
    ,
    plugins: [

        new MiniCssExtractPlugin(
            filename: "adminBundle.css"
        ),
        new MinifyPlugin()

    ]


;

Admin.scss

// Variables
@import "./variables/admin.scss";
@import "./fontawesome.min.css";
@import "./solid.scss";

ALL OTHER NORMAL CSS.....

这是solid.scss

/*!
 * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); 

.fa,
.fas 
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 

好吧,Visual Studio 代码插件 watch-sass 可以毫无问题地解决它。但现在我使用的是 webpack。当我没有导入solid.scss 时,它运行良好,但是当我导入solid.scss 时,我开始收到错误,可能它不能与字体文件一起使用。但我不知道如何解决它。我将不胜感激。

这是错误示例

 ERROR in ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss)
    Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in 'C:\Users\XXXXXXXXXX\Praca\Webové aplikácie\nodeCMS\public\src\css'
     @ ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss) 5:38-77 6:38-77

【问题讨论】:

管理所有这些文件(.eot、.ttf、.png、.jpg...)我使用文件加载器webpack.js.org/loaders/file-loader。尝试也使用那个加载器。 【参考方案1】:

在我的情况下,错误是:

Error: Can't resolve '@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome

我修复了它,将它添加到我的 index.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

注意 $fa-font-path 中的“~”

这是我的 webpack.config


  test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  use: 
    loader: 'file-loader',
    options: 
      name: '[path][name].[ext]',
    ,
  ,
,

【讨论】:

【参考方案2】:

有效!!!

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BabelMinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = 
    optimization: 
        minimizer: [new OptimizeCSSAssetsPlugin()],
    ,
    entry: path.resolve(__dirname + '/public/src/js/adminMain.js'),
    output: 
        path: path.resolve(__dirname + '/public/dist/'),
        filename: 'adminBundle.js'
    ,
    devtool: 'source-map',
    module: 
        rules: [
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: 
                    loader: 'babel-loader',
                    options: 
                        presets: ['@babel/preset-env']
                    
                
            ,
            
                test: /\.(sa|sc|c)ss$/,
                use: [
                        loader: MiniCssExtractPlugin.loader
                    , 
                        loader: "css-loader",
                    ,
                    
                        loader: "postcss-loader",
                        options: 
                            sourceMap: true
                        ,
                    ,
                    
                        loader: "sass-loader",
                        options: 
                            sourceMap: true
                        ,
                        options: 
                            implementation: require("sass")
                        
                    
                ]
            ,
            
                test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    loader: 'file-loader',
                ]
            ,
        ]
    ,
    plugins: [

        new MiniCssExtractPlugin(
            filename: "adminBundle.css"
        ),

    ]

;

变量.scss

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

solid.scss

/*!
 * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url('#$fa-font-path/fa-solid-900.eot');
  src: url('#$fa-font-path/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#$fa-font-path/fa-solid-900.woff2') format('woff2'),
  url('#$fa-font-path/fa-solid-900.woff') format('woff'),
  url('#$fa-font-path/fa-solid-900.ttf') format('truetype'),
  url('#$fa-font-path/fa-solid-900.svg#fontawesome') format('svg');


.fa,
.fas 
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;

admin.scss

// Variables
@import "./variables/admin.scss";
@import "./fontawesome.min.css";
@import "./solid.scss";

.....

只需要对 scss 文件进行一些更改,现在它就可以工作了。 $fa-font-path 是关键。为什么不能简单地在 webdev 中做任何事情。

【讨论】:

我遇到了同样的问题,正如你所指出的,$fa-font-path 是这里的主要问题。我用@using 语句解决了这个问题,它覆盖了它的默认值,而不用像这样触及 node_modules 文件:
 use "@fortawesome/fontawesome-free/scss/solid" with ( $fa-font-path: ". ./node_modules/@fortawesome/fontawesome-free/webfonts" ); 
希望对某人有所帮助
【参考方案3】:

通过修改源 scss 或 css 文件的路径来解决此问题。

如果您的目录树如下例所示:

src
    fontawesome/
        scss/
            fontawesome.scss
    style.scss

您需要像这样导入这些文件:

@import "./fontawesome/scss/fontawesome.scss";

就像从 style.scss 文件开始的路径一样,您不需要修改 variables.scss 文件中的路径

【讨论】:

以上是关于Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'”的主要内容,如果未能解决你的问题,请参考以下文章

text Webpack编译,找不到模块:错误:无法解析模块'步伐'

Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'”

Webpack:移动webpack / react文件的位置后,npm start“找不到模块:错误:无法解析...”

React Webpack 错误“找不到模块:错误:无法解析 'public/bundle.js' in..”/“字段 'browser' 不包含有效的别名配置”

找不到模块:错误:无法解析模块“fs”

找不到模块:错误:无法解析“加密”