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

时间：2019-07-28 18:18:08

标签： node.js webpack sass webfonts

我已成功为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

3 个答案:

答案 0 :(得分：2)

在我的情况下，错误是：

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

答案 1 :(得分：0)

它可以工作！！！

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"
        }),

    ]

};

variables.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中不容易做到任何事情。

答案 2 :(得分：0)

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

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

src
    fontawesome/
        scss/
            fontawesome.scss
    style.scss

你需要像这样导入这个文件：

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

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

相关问题
最新问题