Question

我正在从webpack-encore迁移到WebPack，并且面临相对路径解析问题。

我遵循official documentation并尝试了以下配置：

const
  MiniCssExtractPlugin = require('mini-css-extract-plugin'),
  path = require('path');

// eslint-disable-next-line one-var
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: {
    app: './assets/js/app.js',
    front: './assets/js/front.js',
    login: './assets/js/login.js',
    // admin: './assets/js/admin.js',
    common: './assets/js/common.js',
  },
  output: {
    path: path.resolve(__dirname, 'public/build/'),
    publicPath: '/build',
    filename: '[name].js',
  },
  devtool: devMode ? 'inline-source-map' : false,
  module: {
    rules: [
      {
        test: /\.js$/,
        // exclude: /node_modules/,
        loader: [
          'babel-loader',
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        loader: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 'resolve-url-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

如您所见，一些加载程序已注释。这是我在WWW上寻找解决方案后所做的一些测试。

这是我的测试CSS文件：

@import "~font-icons-nexylan/css/font-icons-nexylan";

仅从app.js导入：

require('../css/test.scss');

这是完整的错误：

ERROR in ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss)
Module not found: Error: Can't resolve '../fonts/font-icons-nexylan.svg' in '/code/assets/css'
 @ ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss) 7:356-398

ERROR in ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss)
Module not found: Error: Can't resolve '../fonts/font-icons-nexylan.ttf' in '/code/assets/css'
 @ ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss) 7:270-312

ERROR in ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss)
Module not found: Error: Can't resolve '../fonts/font-icons-nexylan.woff' in '/code/assets/css'
 @ ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss) 7:187-230

ERROR in ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss)
Module not found: Error: Can't resolve '../fonts/font-icons-nexylan.woff2' in '/code/assets/css'
 @ ./assets/css/test.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/test.scss) 7:102-146

我确实尝试过使用私有库，但是使用FontAwesome v4之类的东西却完全相同。

我敢肯定它很快就能解决，但是在StackOverflow上我找不到任何帮助。

感谢您的帮助！

更新：如果我尝试直接从js文件导入字体库：

import 'font-awesome/scss/font-awesome.scss';

它可以工作并复制字体文件。

但是如果从SCSS文件导入则不会：

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

Webpack 4无法加载相对路径字体

0 个答案: